Svelte Bootstrap Progress Bar

Svelte Progress Bar - Bootstrap 4 & Material Design

Svelte Bootstrap progress bar is a component which displays a progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”

Sample

25%

50%

75%

100%

Multiple bars

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<div class="text-center">0%</div>
<MDBProgress/>
<div class="text-center">25%</div>
<MDBProgress value="25"/>
<div class="text-center">50%</div>
<MDBProgress value={50}/>
<div class="text-center">75%</div>
<MDBProgress value={75}/>
<div class="text-center">100%</div>
<MDBProgress value="100"/>
<div class="text-center">Multiple bars</div>
<MDBProgress multi>
  <MDBProgress bar value="15"/>
  <MDBProgress bar color="success" value="30"/>
  <MDBProgress bar color="info" value="25"/>
  <MDBProgress bar color="warning" value="20"/>
  <MDBProgress bar color="danger" value="5"/>
</MDBProgress>

Colors

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<MDBProgress value={2 * 5}/>
<MDBProgress color="success" value="25"/>
<MDBProgress color="info" value={50}/>
<MDBProgress color="warning" value={75}/>
<MDBProgress color="danger" value="100"/>

Labels

25%

1/2

You're almost there!

You did it!

Meh

Wow!

Cool

20%

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<MDBProgress value="25">25%</MDBProgress>
<MDBProgress value={50}>1/2</MDBProgress>
<MDBProgress value={75}>You're almost there!</MDBProgress>
<MDBProgress color="success" value="100">You did it!</MDBProgress>
<MDBProgress multi>
  <MDBProgress bar value="15">Meh</MDBProgress>
  <MDBProgress bar color="success" value="30">Wow!</MDBProgress>
  <MDBProgress bar color="info" value="25">Cool</MDBProgress>
  <MDBProgress bar color="warning" value="20">20%</MDBProgress>
  <MDBProgress bar color="danger" value="5">!!</MDBProgress>
</MDBProgress>

Striped

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<MDBProgress striped value={2 * 5}/>
<MDBProgress striped color="success" value="25"/>
<MDBProgress striped color="info" value={50}/>
<MDBProgress striped color="warning" value={75}/>
<MDBProgress striped color="danger" value="100"/>
<MDBProgress multi>
  <MDBProgress striped bar value="10"/>
  <MDBProgress striped bar color="success" value="30"/>
  <MDBProgress striped bar color="warning" value="20"/>
  <MDBProgress striped bar color="danger" value="20"/>
</MDBProgress>

Animated

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<MDBProgress animated value={2 * 5}/>
<MDBProgress animated color="success" value="25"/>
<MDBProgress animated color="info" value={50}/>
<MDBProgress animated color="warning" value={75}/>
<MDBProgress animated color="danger" value="100"/>
<MDBProgress multi>
  <MDBProgress animated bar value="10"/>
  <MDBProgress animated bar color="success" value="30"/>
  <MDBProgress animated bar color="warning" value="20"/>
  <MDBProgress animated bar color="danger" value="20"/>
</MDBProgress>

Multi

Plain

With Labels

Meh

Wow!

25%

LOOK OUT!!

Stripes and Animations

Stripes

Animated Stripes

Plain

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<div class="text-center">Plain</div>
<MDBProgress multi>
  <MDBProgress bar value="15"/>
  <MDBProgress bar color="success" value="20"/>
  <MDBProgress bar color="info" value="25"/>
  <MDBProgress bar color="warning" value="20"/>
  <MDBProgress bar color="danger" value="15"/>
</MDBProgress>
<div class="text-center">With Labels</div>
<MDBProgress multi>
  <MDBProgress bar value="15">Meh</MDBProgress>
  <MDBProgress bar color="success" value="35">Wow!</MDBProgress>
  <MDBProgress bar color="warning" value="25">25%</MDBProgress>
  <MDBProgress bar color="danger" value="25">LOOK OUT!!</MDBProgress>
</MDBProgress>
<div class="text-center">Stripes and Animations</div>
<MDBProgress multi>
  <MDBProgress bar striped value="15">Stripes</MDBProgress>
  <MDBProgress bar animated color="success" value="30">Animated Stripes</MDBProgress>
  <MDBProgress bar color="info" value="25">Plain</MDBProgress>
</MDBProgress>

Max

1 of 5

50 of 135

75 of 111

463 of 500

Various (40) of 55

<script>
  import {MDBProgress} from 'mdbsvelte';
</script>

<div class="text-center">1 of 5</div>
<MDBProgress value="1" max="5"/>
<div class="text-center">50 of 135</div>
<MDBProgress value={50} max="135"/>
<div class="text-center">75 of 111</div>
<MDBProgress value={75} max={111}/>
<div class="text-center">463 of 500</div>
<MDBProgress value="463" max={500}/>

<div class="text-center">Various (40) of 55</div>
<MDBProgress multi>
  <MDBProgress bar value="5" max={55}>5</MDBProgress>
  <MDBProgress bar color="success" value="15" max={55}>15</MDBProgress>
  <MDBProgress bar color="warning" value="10" max={55}>10</MDBProgress>
  <MDBProgress bar color="danger" value="10" max={55}>10</MDBProgress>
</MDBProgress>

No Preview