Progress Bar
The new AHA progress bar is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
Progress Bar
7
In Progress
4
Completed
6
Not Started
HTML
<div className="d-flex justify-content-around w-50 m-3">
<div className="aui-portfolio-progress">
<div className="aui-progress" data-percentage="70">
<span className="aui-progress-left">
<span className="aui-progress-bar-left"></span>
</span>
<span className="aui-progress-right">
<span className="aui-progress-bar-left"></span>
</span>
<div className="aui-progress-value">
<div className="aui-count">
<span aria-label="In progress count" className="mt-2">7</span>
</div>
</div>
</div>
<div aria-label="In progress" className="aui-portfolio-progress-status mt-2">In Progress</div>
</div>
<div className="aui-portfolio-progress">
<div className="aui-progress" data-percentage="30">
<span className="aui-progress-left">
<span className="aui-progress-bar-centre"></span>
</span>
<span className="aui-progress-right">
<span className="aui-progress-bar-centre"></span>
</span>
<div className="aui-progress-value">
<div className="aui-count">
<span aria-label="Completed count" className="mt-2">4</span>
</div>
</div>
</div>
<div aria-label="Completed" className="aui-portfolio-progress-status mt-2">Completed</div>
</div>
<div className="aui-portfolio-progress">
<div className="aui-progress" data-percentage="50">
<span className="aui-progress-left">
<span className="aui-progress-bar-right"></span>
</span>
<span className="aui-progress-right">
<span className="aui-progress-bar-right"></span>
</span>
<div className="aui-progress-value">
<div className="aui-count">
<span aria-label="Not Started count" className="mt-2">6</span>
</div>
</div>
</div>
<div aria-label="Not Started" className="aui-portfolio-progress-status mt-2">Not Started</div>
</div>
</div>