More CSS Styling in Sitecore


Progress Bar

Show the progression or progress of your task visually. To change the length of the progress bar, just enter a new width percentage in the style section (i.e. style="width: 60%;") and aria-valuenow. Then change the text to match (i.e. 60%).

60%

Canvas LTI Example:

 On Road Map
Initiated & Reviewing
Initiated & Reviewing
Approvals & Research
Testing & Learning
Completed & Installed

<div class="progress">
  <div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div> Canvas LTI Example: <div class="progress">
<div style="width: 0.5%; color: gray;" class="bar" role="progressbar" aria-valuenow="0.5" aria-valuemin="0" aria-valuemax="100">
 &nbsp;On&nbsp;Road&nbsp;Map
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="bar" style="width: 20%;">
 Initiated & Reviewing
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="bar" style="width: 40%;">
 Initiated & Reviewing
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="bar" style="width: 60%;">
Approvals & Research
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="bar" style="width: 80%;">
 Testing & Learning
</div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="bar" style="width: 100%;">
 Completed & Installed
</div>
</div>