Svelteit Logo

Progress Bars

Example :: Progress Bars

  import { ProgressBar } from '@colorfuldots/svelteit'

<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


  import { ProgressBar } from '@colorfuldots/svelteit'

<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

  import { ProgressBar } from '@colorfuldots/svelteit'

<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

  import { ProgressBar } from '@colorfuldots/svelteit'

<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 />


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.