Linear Progress Bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!--
Snippet Name: Linear Progress Bar
Description: Animated horizontal progress bar with percentage label and gradient fill. Includes determinate and indeterminate modes.
Author: DevSnips Contributors
Usage Example: Drop into dashboards or async task panels. Set data-value to control the fill.
-->
<div class="w-full max-w-md" data-progress="linear">
  <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">Uploading assets…</span>
    <span class="progress-label text-sm font-semibold tabular-nums text-gray-900">0%</span>
  </div>
  <div
    class="relative h-2.5 w-full overflow-hidden rounded-full bg-gray-100"
    role="progressbar"
    aria-label="Upload progress"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    aria-valuetext="0 percent"
  >
    <div class="progress-fill absolute inset-y-0 left-0 w-0 rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-[width] duration-300 ease-out"></div>
  </div>
</div>

<script>
  (function () {
    const root = document.currentScript.closest('[data-progress]');
    if (!root) return;
    const fill = root.querySelector('.progress-fill');
    const label = root.querySelector('.progress-label');
    const bar = root.querySelector('[role="progressbar"]');
  })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Linear Bar

Linear progress bar.

## Usage
```bash
npx devsnips add Tailwind/Components/Progress/linear-bar
```
Copy from `code.html`. Prefer `role="progressbar"` with value attributes when dynamic.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`