hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-14 14:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0 docs and style migration

Browse Source
This commit is contained in:
Ronan Berder
2026-06-17 11:19:31 +08:00
parent 815e3ffffe
commit 1d33827162
183 changed files with 8805 additions and 13225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/progress.mdx
+26
View File
@@ -0,0 +1,26 @@
# Progress
<Callout title="No dedicated component" icon="circle-alert">
There is no dedicated Progress component in Basecoat.
</Callout>
<Preview class="w-full max-w-sm">
<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
<div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 17%"></div>
</div>
<script>
setTimeout(() => {
document.getElementById('demo-progress').style.width = '66%';
}, 500);
</script>
</Preview>
## Usage
```html
<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
<div class="bg-primary h-full w-full flex-1 transition-all" style="width: 66%"></div>
</div>
```
Progress bars are pure HTML composition using Tailwind utility classes. Use a container div for the track and an inner div for the indicator. Set the indicator's width with inline styles or via JavaScript.