Custom Progress Components

Default

<div class="progress"> <div class="progress-bar bg-pumpkin" style="width: 50%"></div> </div>

Color Variants

Pumpkin
Orange
Darkblue
Lightblue
Violet
Yellow
Aquamarine
Apricot
<div class="progress-wrap"> <small>Pumpkin</small> <div class="progress"> <div class="progress-bar bg-pumpkin" style="width: 20%"></div> </div> <small>Orange</small> <div class="progress"> <div class="progress-bar bg-orange" style="width: 30%"></div> </div> <small>Darkblue</small> <div class="progress"> <div class="progress-bar bg-darkblue" style="width: 40%"></div> </div> <small>Lightblue</small> <div class="progress"> <div class="progress-bar bg-lightblue" style="width: 50%"></div> </div> <small>Violet</small> <div class="progress"> <div class="progress-bar bg-violet" style="width: 60%"></div> </div> <small>Yellow</small> <div class="progress"> <div class="progress-bar bg-yellow" style="width: 70%"></div> </div> <small>Aquamarine</small> <div class="progress"> <div class="progress-bar bg-aquamarine" style="width: 80%"></div> </div> <small>Apricot</small> <div class="progress"> <div class="progress-bar bg-apricot" style="width: 90%"></div> </div> </div>

Striped Variant

<div class="progress"> <div class="progress-bar bg-pumpkin striped" style="width: 70%"></div> </div>

Animated Variant

<div class="progress"> <div class="progress-bar bg-pumpkin striped animated" style="width: 80%"></div> </div>

Size Variants

Small
Medium / Default
Large
Extra Large
<div class="progress-wrap"> <small>Small</small> <div class="progress progress-sm"> <div class="progress-bar bg-pumpkin" style="width: 20%"></div> </div> <small>Medium / Default</small> <div class="progress progress-md"> <div class="progress-bar bg-pumpkin" style="width: 40%"></div> </div> <small>Large</small> <div class="progress progress-lg"> <div class="progress-bar bg-pumpkin" style="width: 60%"></div> </div> <small>Extra Large</small> <div class="progress progress-xl"> <div class="progress-bar bg-pumpkin" style="width: 80%"></div> </div> </div>