mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
92 lines
2.6 KiB
Plaintext
92 lines
2.6 KiB
Plaintext
# Progress
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div id="progress-demo" class="progress" role="progressbar" aria-label="Loading" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100">
|
|
<span style="width: 13%"></span>
|
|
</div>
|
|
<script>{`
|
|
setTimeout(() => {
|
|
const progress = document.getElementById("progress-demo");
|
|
const indicator = progress?.querySelector("span");
|
|
if (!progress || !indicator) return;
|
|
progress.setAttribute("aria-valuenow", "66");
|
|
indicator.style.width = "66%";
|
|
}, 500);
|
|
`}</script>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, Progress component CSS, and one style pack.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/base.css";
|
|
@import "basecoat-css/components/progress.css";
|
|
@import "basecoat-css/styles/vega.css";
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Add your progress HTML">
|
|
|
|
Add `class="progress"` and `role="progressbar"` to the root. Use one child `<span>` as the visual indicator.
|
|
|
|
```html
|
|
<div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
|
|
<span style="width: 66%"></span>
|
|
</div>
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
### HTML structure
|
|
|
|
<dl>
|
|
<dt><code><div class="progress" role="progressbar"></code></dt>
|
|
<dd>Progress root. Set <code>aria-label</code> or <code>aria-labelledby</code>, plus <code>aria-valuenow</code>, <code>aria-valuemin</code>, and <code>aria-valuemax</code>.</dd>
|
|
<dt><code><span style="width: ..."></code></dt>
|
|
<dd>Visual indicator. Its width should match the current value.</dd>
|
|
</dl>
|
|
|
|
## Examples
|
|
|
|
### Label
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div class="field">
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<label id="progress-label">Upload progress</label>
|
|
<output class="ms-auto tabular-nums">66%</output>
|
|
</div>
|
|
<div class="progress" role="progressbar" aria-labelledby="progress-label" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
|
|
<span style="width: 66%"></span>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
Progress supports `dir="rtl"` on the root or a parent.
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div class="field w-full" dir="rtl">
|
|
<label id="progress-upload-rtl" for="progress-upload">تقدم الرفع <span class="ms-auto">٦٦%</span></label>
|
|
<div id="progress-upload" class="progress" role="progressbar" aria-labelledby="progress-upload-rtl" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
|
|
<span style="width: 66%"></span>
|
|
</div>
|
|
</div>
|
|
</Preview>
|