<div class="space-y-4">
  <div class="progress" data-value="25"></div>
  <div class="progress" data-value="50"></div>
  <div class="progress" data-value="75"></div>
  <div class="progress" data-value="100"></div>
</div>

<div class="space-y-4">
  <div class="progress tiny" data-value="60"></div>
  <div class="progress small" data-value="60"></div>
  <div class="progress" data-value="60"></div>
  <div class="progress large" data-value="60"></div>
  <div class="progress big" data-value="60"></div>
</div>

<div class="space-y-6">
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Semantic Colors</h4>
    <div class="space-y-3">
      <div class="progress" data-value="70"></div>
      <div class="progress primary" data-value="70"></div>
      <div class="progress positive" data-value="70"></div>
      <div class="progress negative" data-value="70"></div>
      <div class="progress warning" data-value="70"></div>
      <div class="progress info" data-value="70"></div>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Extended Color Palette</h4>
    <div class="space-y-3">
      <div class="progress red" data-value="70"></div>
      <div class="progress orange" data-value="70"></div>
      <div class="progress yellow" data-value="70"></div>
      <div class="progress olive" data-value="70"></div>
      <div class="progress green" data-value="70"></div>
      <div class="progress teal" data-value="70"></div>
      <div class="progress blue" data-value="70"></div>
      <div class="progress violet" data-value="70"></div>
      <div class="progress purple" data-value="70"></div>
      <div class="progress pink" data-value="70"></div>
      <div class="progress brown" data-value="70"></div>
      <div class="progress grey" data-value="70"></div>
      <div class="progress black" data-value="70"></div>
    </div>
  </div>
</div>

<div class="space-y-4">
  <div class="progress labeled tiny" data-value="25"></div>
  <div class="progress labeled small primary" data-value="50"></div>
  <div class="progress labeled success" data-value="75"></div>
  <div class="progress labeled large warning" data-value="90" data-label="90% Complete"></div>
  <div class="progress labeled big danger" data-value="100" data-label="Complete!"></div>
</div>

<div class="space-y-4">
  <div class="progress striped" data-value="40"></div>
  <div class="progress striped primary" data-value="60"></div>
  <div class="progress striped success" data-value="80"></div>
</div>

<div class="space-y-4">
  <div class="progress animated" data-value="45"></div>
  <div class="progress striped animated primary" data-value="65"></div>
  <div class="progress striped animated success" data-value="85"></div>
</div>

<div class="space-y-6">
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Project Progress</span>
      <span class="text-sm text-gray-500">45%</span>
    </div>
    <div class="progress" data-value="45"></div>
  </div>

  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Upload Progress</span>
      <span class="text-sm text-gray-500">72%</span>
    </div>
    <div class="progress primary" data-value="72"></div>
  </div>

  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Download Speed</span>
      <span class="text-sm text-gray-500">2.5 MB/s</span>
    </div>
    <div class="progress success" data-value="85"></div>
  </div>
</div>

<div class="space-y-4">
  <div class="progress segmented tiny">
    <div class="progress-segment" style="width: 33.33%"></div>
    <div class="progress-segment" style="width: 33.33%"></div>
    <div class="progress-segment inactive" style="width: 33.33%"></div>
  </div>

  <div class="progress segmented small primary">
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment inactive" style="width: 25%"></div>
  </div>

  <div class="progress segmented primary">
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment" style="width: 25%"></div>
    <div class="progress-segment inactive" style="width: 25%"></div>
  </div>

  <div class="progress segmented large success">
    <div class="progress-segment" style="width: 20%"></div>
    <div class="progress-segment" style="width: 20%"></div>
    <div class="progress-segment" style="width: 20%"></div>
    <div class="progress-segment" style="width: 20%"></div>
    <div class="progress-segment inactive" style="width: 20%"></div>
  </div>

  <div class="progress segmented big warning">
    <div class="progress-segment" style="width: 16.66%"></div>
    <div class="progress-segment" style="width: 16.66%"></div>
    <div class="progress-segment" style="width: 16.66%"></div>
    <div class="progress-segment" style="width: 16.66%"></div>
    <div class="progress-segment" style="width: 16.66%"></div>
    <div class="progress-segment inactive" style="width: 16.66%"></div>
  </div>
</div>

<div class="flex gap-6 flex-wrap items-center">
  <div class="progress-circle tiny" data-value="25">
    <svg class="progress-circle-svg" viewBox="0 0 36 36">
      <path
        class="progress-circle-bg"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <path
        class="progress-circle-bar"
        stroke-dasharray="25, 100"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
      <text
        x="18"
        y="18"
        class="progress-circle-text"
        dominant-baseline="middle"
        text-anchor="middle"
      >
        25%
      </text>
    </svg>
  </div>

  <div class="progress-circle small primary" data-value="50">
    <svg class="progress-circle-svg" viewBox="0 0 36 36">
      <path
        class="progress-circle-bg"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <path
        class="progress-circle-bar"
        stroke-dasharray="50, 100"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
      <text
        x="18"
        y="18"
        class="progress-circle-text"
        dominant-baseline="middle"
        text-anchor="middle"
        style="font-size: 12px"
      >
        50%
      </text>
    </svg>
  </div>

  <div class="progress-circle success" data-value="75">
    <svg class="progress-circle-svg" viewBox="0 0 36 36">
      <path
        class="progress-circle-bg"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <path
        class="progress-circle-bar"
        stroke-dasharray="75, 100"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
      <text
        x="18"
        y="18"
        class="progress-circle-text"
        dominant-baseline="middle"
        text-anchor="middle"
        style="font-size: 12px"
      >
        75%
      </text>
    </svg>
  </div>

  <div class="progress-circle large warning" data-value="85">
    <svg class="progress-circle-svg" viewBox="0 0 36 36">
      <path
        class="progress-circle-bg"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <path
        class="progress-circle-bar"
        stroke-dasharray="85, 100"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
      <text
        x="18"
        y="18"
        class="progress-circle-text"
        dominant-baseline="middle"
        text-anchor="middle"
        style="font-size: 12px"
      >
        85%
      </text>
    </svg>
  </div>

  <div class="progress-circle big danger" data-value="95">
    <svg class="progress-circle-svg" viewBox="0 0 36 36">
      <path
        class="progress-circle-bg"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <path
        class="progress-circle-bar"
        stroke-dasharray="95, 100"
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
      ></path>
      <circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
      <text
        x="18"
        y="18"
        class="progress-circle-text"
        dominant-baseline="middle"
        text-anchor="middle"
        style="font-size: 13px"
      >
        95%
      </text>
    </svg>
  </div>
</div>

<div class="space-y-4">
  <div class="progress indeterminate">
    <div class="progress-bar"></div>
  </div>

  <div class="progress indeterminate primary">
    <div class="progress-bar"></div>
  </div>

  <div class="progress indeterminate success">
    <div class="progress-bar"></div>
  </div>
</div>

<div class="bg-white p-6 rounded-lg border border-gray-200 space-y-4">
  <h4 class="font-medium text-gray-900">File Upload Progress</h4>

  <div class="space-y-3">
    <div class="flex items-center justify-between text-sm">
      <span class="text-gray-600">document.pdf</span>
      <span class="text-gray-500">2.4 MB / 5.2 MB</span>
    </div>
    <div class="progress primary" data-value="46"></div>
  </div>

  <div class="space-y-3">
    <div class="flex items-center justify-between text-sm">
      <span class="text-gray-600">image.jpg</span>
      <span class="text-green-600">Complete</span>
    </div>
    <div class="progress success" data-value="100"></div>
  </div>

  <div class="space-y-3">
    <div class="flex items-center justify-between text-sm">
      <span class="text-gray-600">video.mp4</span>
      <span class="text-gray-500">Waiting...</span>
    </div>
    <div class="progress" data-value="0"></div>
  </div>
</div>

<div class="space-y-6">
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Dynamic Progress Control</h4>
    <div id="demo-progress" class="progress primary" data-value="30"></div>
    <div class="flex gap-2 mt-3">
      <button class="btn tiny" onclick="Progress.reset('demo-progress')">Reset</button>
      <button class="btn tiny" onclick="Progress.increment('demo-progress', 10)">+10</button>
      <button class="btn tiny" onclick="Progress.decrement('demo-progress', 10)">-10</button>
      <button class="btn tiny" onclick="Progress.set('demo-progress', 50)">50%</button>
      <button class="btn tiny" onclick="Progress.complete('demo-progress')">Complete</button>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Animated Progress</h4>
    <div id="animated-progress" class="progress positive" data-value="0"></div>
    <div class="flex gap-2 mt-3">
      <button class="btn tiny" onclick="Progress.animate('animated-progress', 100, 2000)">
        Animate to 100%
      </button>
      <button class="btn tiny" onclick="Progress.animate('animated-progress', 0, 1000)">
        Animate to 0%
      </button>
      <button
        class="btn tiny"
        onclick="Progress.animate('animated-progress', Math.random() * 100, 1500)"
      >
        Random
      </button>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Create Progress Dynamically</h4>
    <div id="dynamic-container"></div>
    <div class="flex gap-2 mt-3">
      <button
        class="btn tiny"
        onclick="
                            const container = document.getElementById('dynamic-container');
                            container.innerHTML = '';
                            Progress.create({
                                container: container,
                                value: 60,
                                color: 'warning',
                                striped: true,
                                animated: true
                            });
                        "
      >
        Create Striped
      </button>
      <button
        class="btn tiny"
        onclick="
                            const container = document.getElementById('dynamic-container');
                            container.innerHTML = '';
                            Progress.create({
                                container: container,
                                value: 75,
                                color: 'negative',
                                labeled: true
                            });
                        "
      >
        Create Labeled
      </button>
      <button
        class="btn tiny"
        onclick="
                            const container = document.getElementById('dynamic-container');
                            container.innerHTML = '';
                            Progress.create({
                                container: container,
                                indeterminate: true,
                                color: 'primary'
                            });
                        "
      >
        Create Indeterminate
      </button>
    </div>
  </div>

  <div class="bg-gray-50 p-4 rounded-lg">
    <h4 class="text-sm font-medium text-gray-700 mb-3">Code Examples</h4>
    <pre
      class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"
    ><code>// Simple HTML - Auto-renders on page load
&lt;div class="progress" data-value="50"&gt;&lt;/div&gt;

// JavaScript API
Progress.set('my-progress', 75);                  // Set to 75%
Progress.increment('my-progress', 10);            // Add 10%
Progress.decrement('my-progress', 10);            // Subtract 10%
Progress.complete('my-progress');                 // Set to 100%
Progress.reset('my-progress');                    // Set to 0%

// Animated transitions
Progress.animate('my-progress', 100, 2000);       // Animate to 100% over 2 seconds

// Create dynamically
const progress = Progress.create({
    value: 50,
    color: 'primary',
    size: 'large',
    striped: true,
    animated: true,
    container: '#my-container'
});

// Get current value
const value = Progress.get('my-progress');        // Returns current percentage</code></pre>
  </div>
</div>