Progress
A bar and a circle that spring to each new value and read their percentage aloud.
Features
- A bar and a circle that spring to each new value.
Use it for
- Uploads and long tasks.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Progress, ProgressCircle } from 'runets'
<Progress value={67} label="Upload" />
<ProgressCircle value={67} label="Upload" />API
| Prop | Type | What it does |
|---|---|---|
value | number | 0 to 100. |
label | string | What is progressing. |
Accessibility
- role progressbar with aria-valuenow; reads its percentage.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.