Progress

Basic Progress

 <div className="example">

 <ProgressBar className="mb-3" now={10} />

 <ProgressBar className="mb-3" now={20} />

 <ProgressBar className="mb-3" now={40} />

 <ProgressBar className="mb-3 " now={60} />

 <ProgressBar className="mb-3 " now={80} />
</div>
Contextual Progress

<div className="example">

<ProgressBar variant="secondary-gradient" className="mb-3 " now={10} />

<ProgressBar variant="danger-gradient" className="mb-3 " now={20} />

<ProgressBar variant="warning-gradient" className="mb-3 " now={40} />

<ProgressBar variant="success-gradient" className="mb-3 " now={60} />

<ProgressBar variant="info-gradient" className="mb-3 " now={80} />
</div>
Basic Progress with label
10%
20%
40%
60%
80%

  <div className="example">

  <ProgressBar variant="default" className="mb-3 " now={20} label={{10}} />

  <ProgressBar variant="secondary" className="mb-3 " now={30} label={{20}} />

  <ProgressBar variant="success" className="mb-3 " now={50} label={{40}} />

  <ProgressBar variant="warning" className="mb-3 " now={70} label={{60}} />

  <ProgressBar variant="info" className="mb-3 " now={85} label={{80}} />
</div>
Contextual Progress with label
7%
20%
40%
60%
80%

 <div className="example">

 <ProgressBar variant="pink" className="mb-3 " now={20} label={{7}} />

 <ProgressBar variant="green" className="mb-3 " now={30} label={{20}} />

 <ProgressBar variant="yellow" className="mb-3 " now={50} label={{40}} />

 <ProgressBar variant="blue" className="mb-3 " now={70} label={{60}} />

 <ProgressBar variant="orange" className="mb-3 " now={85} label={{80}} />
</div>
Progress Sizes

 <div className="example">

 <ProgressBar variant="blue" className="mb-3 progress-xs" now={80} />

 <ProgressBar variant="blue" className="mb-3 progress-sm" now={80} />

 <ProgressBar variant="blue" className="mb-3 progress-md" now={80} />

 <ProgressBar variant="blue" className="mb-3 progress-lg" now={80} />

</div>
Mixed color Progress with Sizes

  <div className="example">

  <ProgressBar className="progress-xs mb-3">
    <ProgressBar variant="orange" now={5} />
    <ProgressBar variant="warning" now={5} />
    <ProgressBar variant="info" now={5} />
  </ProgressBar>

  <ProgressBar className="progress-sm mb-3">
    <ProgressBar variant="pink" now={10} />
    <ProgressBar variant="warning" now={15} />
    <ProgressBar variant="teal" now={15} />
  </ProgressBar>

  <ProgressBar className="progress-md mb-3">
    <ProgressBar variant="pink" now={15} />
    <ProgressBar variant="blue" now={20} />
    <ProgressBar variant="cyan" now={30} />
  </ProgressBar>

  <ProgressBar className="progress-lg mb-3">
    <ProgressBar variant="green" now={30} />
    <ProgressBar variant="pink" now={20} />
    <ProgressBar variant="orange" now={40} />
  </ProgressBar>
</div>
Striped Progress
40%
60%

 <div className="example">

 <ProgressBar variant="pink" now={20} animated className="mb-3" />

 <ProgressBar variant="blue-1" animated now={20} className="mb-3" />

 <ProgressBar variant="yellow-1" animated now={45} label={{40}} className="mb-3" />

 <ProgressBar variant="green-1" animated now={65} label={{60}} className="mb-3" />

</div>
Animated Progress

 <div className="example">
 <ProgressBar className="progress-md mb-3">
   <ProgressBar className="progress-bar-indeterminate bg-pink"></ProgressBar>
 </ProgressBar>
 <ProgressBar className="progress-md mb-3">
   <ProgressBar className="progress-bar-indeterminate bg-yellow-1"></ProgressBar>
 </ProgressBar>
 <ProgressBar className="progress-md mb-3">
   <ProgressBar className="progress-bar-indeterminate bg-blue-1"></ProgressBar>
 </ProgressBar>
 <ProgressBar className="progress-md">
   <ProgressBar className="progress-bar-indeterminate bg-purple-1"></ProgressBar>
 </ProgressBar>
</div>