Progress bar

• Posted: March 4, 2015
• / By: Julita
• / In:

SIMPLE

Progress bar simple

HTML markup:

XHTML

<div class="ct-progressBar"> <header class="ct-u-hideText"> <h4>Progress Bar</h4> </header> <div class="ct-progressBar-content"> <div class="progress"> <div class="progress-bar animating" role="progressbar" data-percentage="90" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> <span>Web Design <strong>90%</strong></span> </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="ct-progressBar">               <header class="ct-u-hideText">                 <h4>Progress Bar</h4>             </header>               <div class="ct-progressBar-content">                   <div class="progress">                     <div class="progress-bar animating" role="progressbar" data-percentage="90" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">                         <span>Web Design <strong>90%</strong></span>                     </div>                 </div>             </div>         </div>

EXTENDED

Progress bar – extended

HTML markup:

XHTML

<div class="ct-progressBar"> <div class="ct-progressBar-content ct-u-paddingBottom40"> <div class="media"> <div class="media-left"> <a href="#" class="ct-progressBar-icon ct-hover--outlineOut"><i class="fa fa-facebook"></i></a> </div> <div class="media-body media-middle ct-u-width100per"> <div class="progress"> <div class="progress-bar animating" role="progressbar" data-percentage="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> <span>Facebook <strong>100%</strong></span> </div> </div> </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="ct-progressBar">             <div class="ct-progressBar-content ct-u-paddingBottom40">                 <div class="media">                     <div class="media-left">                         <a href="#" class="ct-progressBar-icon ct-hover--outlineOut"><i class="fa fa-facebook"></i></a>                     </div>                     <div class="media-body media-middle ct-u-width100per">                         <div class="progress">                             <div class="progress-bar animating" role="progressbar" data-percentage="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">                                 <span>Facebook <strong>100%</strong></span>                             </div>                         </div>                     </div>                 </div>             </div>         </div>

Don’t forget about javascript:

XHTML

<script src="assets/js/progresBar/init.js"></script>

1	<script src="assets/js/progresBar/init.js"></script>