<div class="progress">
        <div class="progress-bar"></div>
        <span class="progress-text">0%</span>
    </div>

   .progress {
            position: relative;
            height: 25px;
            width: 100%;
            border-radius: 10px;
            background-color: #f1f1f1;
        }

        .progress-bar {
            position: absolute;
            height: 100%;
            border-radius: 10px;
            background-color: #007bff;
            transition: width 0.3s ease-in-out;
        }

        .progress-text {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            font-weight: bold;
            line-height: 25px;
            color: #fff;
        }

  function updateProgress() {
            const progressBar = document.querySelector('.progress-bar');
            const progressText = document.querySelector('.progress-text');
            let progress = 0;
            const intervalId = setInterval(() => {
                progress += 10;
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `${progress}%`;
                if (progress >= 100) {
                    clearInterval(intervalId);
                }
            }, 1000);
        }
        updateProgress();