Progress Bars
Example :: Progress Bars
<script>
import { ProgressBar } from '@colorfuldots/svelteit'
</script>
<ProgressBar progress={20} primary />
<ProgressBar progress={30} secondary />
<ProgressBar progress={40} success />
<ProgressBar progress={50} danger />
<ProgressBar progress={60} warning />
<ProgressBar progress={70} info />
<ProgressBar progress={80} dark />
Example :: Progress Bars With Label
20%
30%
40%
50%
60%
70%
80%
90%
<script>
import { ProgressBar } from '@colorfuldots/svelteit'
</script>
<ProgressBar progress={20} label={'20%'} primary small />
<ProgressBar progress={30} label={'30%'} secondary medium />
<ProgressBar progress={40} label={'40%'} success large />
<ProgressBar progress={50} label={'50%'} danger />
<ProgressBar progress={60} label={'60%'} warning />
<ProgressBar progress={70} label={'70%'} info />
<ProgressBar progress={80} label={'80%'} light bordered />
<ProgressBar progress={90} label={'90%'} dark />
Example :: Progress Bars With Sizes
$20,000 Raised
$30,000 Raised
$40,000 Raised
<script>
import { ProgressBar } from '@colorfuldots/svelteit'
</script>
<ProgressBar progress={20} label={'$20,000 Raised'} small primary />
<ProgressBar progress={30} label={'$30,000 Raised'} medium secondary />
<ProgressBar progress={40} label={'$40,000 Raised'} large success />
Example :: Progress Bars With Border
60% of the population
70% of the population
80% of the population
90% of the population
<script>
import { ProgressBar } from '@colorfuldots/svelteit'
</script>
<ProgressBar progress={60} label={'60% of the population'} warning bordered />
<ProgressBar progress={70} label={'70% of the population'} info bordered />
<ProgressBar progress={80} label={'80% of the population'} light bordered />
<ProgressBar progress={90} label={'90% of the population'} dark bordered />
API
| Prop Name | Type | Is Required | Default Value | Description |
|---|---|---|---|---|
| progress | number|string | true | null | Sets progress width of the inner bar in pixels or points |
| primary, secondary, success, danger, warning, info, light, dark | bool | false | null | Sets the color of the progress bar |
| bordered | bool | false | null | Sets an outline to the progress bar |
| small, medium, large | bool | false | null | Sets the size of the progress bar |
Progress Bars
A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.