20067 > feature > Short Codes > ProgressBars Counters

ProgressBars Counters

/ /

<div class="number_Animation_1 row a_t_c">
  <div class="col-md-3 col-sm-6"> <span class="fa fa-user a_b_c"> </span> <span class="animation  number" data-number="5300">0</span> </div>
  <div class="col-md-3 col-sm-6"> <span class="fa fa-heart a_b_c"> </span> <span class="animation  number" data-number="10321">0</span> </div>
  <div class="clearfix visible-sm"></div>
  <div class="col-md-3 col-sm-6"> <span class="fa fa-star a_b_c"> </span> <span class="animation  number" data-number="4632">0</span> </div>
  <div class="col-md-3 col-sm-6"> <span class="fa fa-bookmark a_b_c"> </span> <span class="animation  number" data-number="6548">0</span> </div>
</div>

WEB DESIGN

HTML5 & CSS3

GRAPHIC DESIGN

DNN

SOURCE CODE

<div class="chart_list_1 row a_t_c">
  <div class="col-md-3 col-sm-6">
    <div data-percent="100" class="percentage1">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>WEB DESIGN</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="70" class="percentage1">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>HTML5 & CSS3</p>
  </div>
  <div class="clearfix visible-sm"></div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="80" class="percentage1">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>GRAPHIC DESIGN</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="46" class="percentage1">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>DNN</p>
  </div>
</div>

WEB DESIGN

HTML5 & CSS3

GRAPHIC DESIGN

DNN

SOURCE CODE

<div class="chart_list_2 row a_t_c">
  <div class="col-md-3 col-sm-6">
    <div data-percent="64" class="percentage2">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>WEB DESIGN</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="70" class="percentage2">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>HTML5 & CSS3</p>
  </div>
  <div class="clearfix visible-sm"></div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="80" class="percentage2">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>GRAPHIC DESIGN</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="46" class="percentage2">
      <div class="percentage_inner"> <span>0</span>%</div>
    </div>
    <p>DNN</p>
  </div>
</div>

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

DNN

SOURCE CODE

<div class="loaded_list_3">
  <p>PHOTOSHOP </p>
  <div class="progress">
    <div class="bar animation animationwidth a_bg_c" data-width="90%"> <span></span> </div>
  </div>
  <p>ILLUSTRATOR</p>
  <div class="progress">
    <div class="bar animation animationwidth a_bg_c" data-width="95%"> <span></span> </div>
  </div>
  <p>COREL DRAWL</p>
  <p> </p>
  <div class="progress">
    <div class="bar animation animationwidth a_bg_c" data-width="85%"> <span></span> </div>
  </div>
  <p>DNN</p>
  <div class="progress">
    <div class="bar animation animationwidth a_bg_c" data-width="75%"> <span></span> </div>
  </div>
</div>

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

DNN

SOURCE CODE

<div class="loaded_list_4">
  <p>PHOTOSHOP </p>
  <div class="progress">
    <div class="bar animation animationwidth  a_bg_c" data-width="90%"> <span></span> </div>
  </div>
  <p>ILLUSTRATOR</p>
  <div class="progress">
    <div class="bar animation animationwidth  a_bg_c" data-width="95%"> <span></span> </div>
  </div>
  <p>COREL DRAWL</p>
  <p> </p>
  <div class="progress">
    <div class="bar animation animationwidth  a_bg_c" data-width="85%"> <span></span> </div>
  </div>
  <p>DNN</p>
  <div class="progress">
    <div class="bar animation animationwidth  a_bg_c" data-width="75%"> <span></span> </div>
  </div>
</div>

0 LIKES

0 PRODUCTS

0 COMMENTS

0 DOWNLOADS

SOURCE CODE

<div class="number_Animation_2 row">
  <div class="col-md-3 col-sm-6">
    <div class="box"> <span class="fa fa-user a_t_c"> </span> <span data-number="5300" class="animation  number">0</span> LIKES </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="box"> <span class="fa fa-heart a_t_c"> </span> <span data-number="10321" class="animation  number">0</span> PRODUCTS </div>
  </div>
  <div class="clearfix visible-sm"></div>
  <div class="col-md-3 col-sm-6">
    <div class="box"> <span class="fa fa-star a_t_c"> </span> <span data-number="4632" class="animation  number">0</span> COMMENTS </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="box"> <span class="fa fa-bookmark a_t_c"> </span> <span data-number="6548" class="animation  number">0</span> DOWNLOADS </div>
  </div>
</div>

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

WEB DESIGN

HTML & CSS

DNN

Programme

WEB DESIGN

SOURCE CODE

<div class="row">
  <div class="col-sm-6">
    <div class="Detail2_loaded_list_4 pt-20">
      <div class="clearfix Detail2_loadedlist_box">
        <p>PHOTOSHOP</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="90%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>ILLUSTRATOR</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="95%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>COREL DRAWL</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="80%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>WEB DESIGN</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="85%"> <span></span> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="Detail2_loaded_list_4 pt-20">
      <div class="clearfix Detail2_loadedlist_box">
        <p>HTML & CSS</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="75%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>DNN</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="80%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>Programme</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="80%"> <span></span> </div>
          </div>
        </div>
      </div>
      <div class="clearfix Detail2_loadedlist_box">
        <p>WEB DESIGN</p>
        <div class="Detail2_loaded_list_bor">
          <div class="progress">
            <div class="bar animation animationwidth  a_bg_c" data-width="75%"> <span></span> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>