Animated Progress Bar in CSS

<h1>Animated Progress Bars</h1>
<p class="subtitle">10 Creative CSS Progress Bar Animations</p>

<div class="container">
  <div class="progress-section">
    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">1. Classic Fill with Shimmer</span>
        <span class="progress-percentage">85%</span>
      </div>
      <div class="progress-bar-1">
        <div class="progress-fill-1" style="--progress: 85%; width: 85%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">2. Striped Animation</span>
        <span class="progress-percentage">70%</span>
      </div>
      <div class="progress-bar-2">
        <div class="progress-fill-2" style="--progress: 70%; width: 70%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">3. Pulsing Progress</span>
        <span class="progress-percentage">60%</span>
      </div>
      <div class="progress-bar-3">
        <div class="progress-fill-3" style="--progress: 60%; width: 60%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">4. Gradient Wave</span>
        <span class="progress-percentage">90%</span>
      </div>
      <div class="progress-bar-4">
        <div class="progress-fill-4" style="--progress: 90%; width: 90%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">5. Glowing Effect</span>
        <span class="progress-percentage">75%</span>
      </div>
      <div class="progress-bar-5">
        <div class="progress-fill-5" style="--progress: 75%; width: 75%;"></div>
      </div>
    </div>
  </div>

  <div class="progress-section">
    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">6. Animated Dots</span>
        <span class="progress-percentage">65%</span>
      </div>
      <div class="progress-bar-6">
        <div class="progress-fill-6" style="--progress: 65%; width: 65%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">7. Bounce Fill</span>
        <span class="progress-percentage">80%</span>
      </div>
      <div class="progress-bar-7">
        <div class="progress-fill-7" style="--progress: 80%; width: 80%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">8. Split Color</span>
        <span class="progress-percentage">55%</span>
      </div>
      <div class="progress-bar-8">
        <div class="progress-fill-8" style="--progress: 55%; width: 55%;"></div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">9. Circular Progress</span>
        <span class="progress-percentage">78%</span>
      </div>
      <div class="progress-circular">
        <svg width="150" height="150">
          <circle class="progress-circular-bg" cx="75" cy="75" r="70"></circle>
          <circle class="progress-circular-fill" cx="75" cy="75" r="70" style="--progress: 78;"></circle>
        </svg>
        <div class="progress-circular-text">78%</div>
      </div>
    </div>

    <div class="progress-item">
      <div class="progress-label">
        <span class="progress-title">10. Neon Glow</span>
        <span class="progress-percentage">95%</span>
      </div>
      <div class="progress-bar-10">
        <div class="progress-fill-10" style="--progress: 95%; width: 95%;"></div>
      </div>
    </div>
  </div>

  <button class="reset-btn" onclick="resetAnimations()">Reset Animations</button>
</div>

      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px 20px;
            color: #fff;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-align: center;
            background: linear-gradient(45deg, #941b0c, #ff6b6b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.8;
            margin-bottom: 50px;
            text-align: center;
        }

        .container {
            max-width: 900px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .progress-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .progress-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: #ff6b6b;
            font-weight: 600;
        }

        .progress-item {
            margin-bottom: 25px;
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.95rem;
        }

        .progress-percentage {
            color: #941b0c;
            font-weight: 700;
        }

        /* Progress Bar 1: Classic Fill */
        .progress-bar-1 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill-1 {
            height: 100%;
            background: linear-gradient(90deg, #941b0c, #c9184a);
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards;
            position: relative;
            overflow: hidden;
        }

        .progress-fill-1::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes fillBar {
            from { width: 0; }
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Progress Bar 2: Striped */
        .progress-bar-2 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .progress-fill-2 {
            height: 100%;
            background: linear-gradient(
                45deg,
                #941b0c 25%,
                #c9184a 25%,
                #c9184a 50%,
                #941b0c 50%,
                #941b0c 75%,
                #c9184a 75%
            );
            background-size: 30px 30px;
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, moveStripes 1s linear infinite;
        }

        @keyframes moveStripes {
            0% { background-position: 0 0; }
            100% { background-position: 30px 0; }
        }

        /* Progress Bar 3: Pulse */
        .progress-bar-3 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .progress-fill-3 {
            height: 100%;
            background: linear-gradient(90deg, #941b0c, #c9184a);
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, pulse 1.5s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(148, 27, 12, 0.6);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Progress Bar 4: Gradient Wave */
        .progress-bar-4 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .progress-fill-4 {
            height: 100%;
            background: linear-gradient(90deg, #941b0c, #ff6b6b, #941b0c);
            background-size: 200% 100%;
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, gradientWave 3s ease infinite;
        }

        @keyframes gradientWave {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* Progress Bar 5: Glowing */
        .progress-bar-5 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .progress-fill-5 {
            height: 100%;
            background: #941b0c;
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, glow 2s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 10px #941b0c, 0 0 20px #941b0c;
            }
            50% {
                box-shadow: 0 0 20px #941b0c, 0 0 40px #941b0c, 0 0 60px #941b0c;
            }
        }

        /* Progress Bar 6: Dots */
        .progress-bar-6 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .progress-fill-6 {
            height: 100%;
            background: 
                radial-gradient(circle, #c9184a 2px, transparent 2px),
                linear-gradient(90deg, #941b0c, #c9184a);
            background-size: 15px 15px, 100% 100%;
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, moveDots 1s linear infinite;
        }

        @keyframes moveDots {
            0% { background-position: 0 0, 0 0; }
            100% { background-position: 15px 15px, 0 0; }
        }

        /* Progress Bar 7: Bounce */
        .progress-bar-7 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill-7 {
            height: 100%;
            background: linear-gradient(90deg, #941b0c, #c9184a);
            border-radius: 15px;
            animation: fillBarBounce 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes fillBarBounce {
            0% { width: 0; }
            70% { width: calc(var(--progress) + 5%); }
            85% { width: calc(var(--progress) - 2%); }
            100% { width: var(--progress); }
        }

        /* Progress Bar 8: Split */
        .progress-bar-8 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
            display: flex;
        }

        .progress-fill-8 {
            height: 100%;
            background: linear-gradient(180deg, #941b0c 50%, #c9184a 50%);
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards;
        }

        /* Progress Bar 9: Circular */
        .progress-circular {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            position: relative;
        }

        .progress-circular svg {
            transform: rotate(-90deg);
        }

        .progress-circular-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.1);
            stroke-width: 10;
        }

        .progress-circular-fill {
            fill: none;
            stroke: #941b0c;
            stroke-width: 10;
            stroke-linecap: round;
            stroke-dasharray: 440;
            stroke-dashoffset: 440;
            animation: fillCircle 2s ease-out forwards;
            filter: drop-shadow(0 0 10px rgba(148, 27, 12, 0.6));
        }

        @keyframes fillCircle {
            to { stroke-dashoffset: calc(440 - (440 * var(--progress)) / 100); }
        }

        .progress-circular-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 700;
            color: #941b0c;
        }

        /* Progress Bar 10: Neon */
        .progress-bar-10 {
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill-10 {
            height: 100%;
            background: #941b0c;
            border-radius: 15px;
            animation: fillBar 2s ease-out forwards, neon 1.5s ease-in-out infinite;
            box-shadow: 0 0 10px #941b0c, 0 0 20px #941b0c, 0 0 30px #941b0c;
        }

        @keyframes neon {
            0%, 100% {
                box-shadow: 0 0 10px #941b0c, 0 0 20px #941b0c, 0 0 30px #941b0c;
            }
            50% {
                box-shadow: 0 0 20px #941b0c, 0 0 40px #941b0c, 0 0 60px #941b0c, 0 0 80px #941b0c;
            }
        }

        .reset-btn {
            margin-top: 30px;
            padding: 15px 40px;
            background: #941b0c;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            align-self: center;
        }

        .reset-btn:hover {
            background: #c9184a;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(148, 27, 12, 0.4);
        }

        function resetAnimations() {
            const fills = document.querySelectorAll('[class*="progress-fill"]');
            fills.forEach(fill => {
                fill.style.animation = 'none';
                setTimeout(() => {
                    fill.style.animation = '';
                }, 10);
            });
        }