DNNGo demo dnn skin unlimited color pack 048 > Features > Short Codes

Progress Bars Counters

/ /

SOURCE CODE

<div class="number_Animation_1 row">
  <div class="col-sm-3">
    <span class="glyphicons glyph-user"> </span>
    <span class="animation  number" data-number="5300">0</span>
  </div>
  <div class="col-sm-3">
    <span class="glyphicons glyph-heart"> </span>
    <span class="animation  number" data-number="10321">0</span>
  </div>
  <div class="col-sm-3">
    <span class="glyphicons glyph-star"> </span>
    <span class="animation  number" data-number="4632">0</span>
  </div>
  <div class="col-sm-3">
    <span class="glyphicons glyph-bookmark"> </span>
    <span class="animation  number" data-number="6548">0</span>
  </div>
</div>

0 %

HTML5

0 %

PHOTOSHOP

0 %

CORELDRAW

0 %

CSS3

SOURCE CODE

<div class="chart_list_1 row">
  <div class="col-sm-3">
    <div data-percent="65" class="percentage1">
      <div class="percentage_inner">
        <span>0</span>
        %</div>
    </div>
    <p>HTML5</p>
  </div>
  <div class="col-sm-3">
    <div data-percent="70" class="percentage1">
      <div class="percentage_inner">
        <span>0</span>
        %</div>
    </div>
    <p>PHOTOSHOP</p>
  </div>
  <div class="col-sm-3">
    <div data-percent="85" class="percentage1">
      <div class="percentage_inner">
        <span>0</span>
        %</div>
    </div>
    <p>CORELDRAW</p>
  </div>
  <div class="col-sm-3">
    <div data-percent="92" class="percentage1">
      <div class="percentage_inner">
        <span>0</span>
        %</div>
    </div>
    <p>CSS3</p>
  </div>
</div>

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

DNN

SOURCE CODE

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

PHOTOSHOP

ILLUSTRATOR

COREL DRAWL

DNN

SOURCE CODE

<div class="loaded_list_2">
  <p>PHOTOSHOP </p>
  <div class="progress">
    <div class="bar animation animationwidth" data-width="90%">
      <span></span>
    </div>
  </div>
  <p>ILLUSTRATOR</p>
  <div class="progress">
    <div class="bar animation animationwidth" data-width="95%">
      <span></span>
    </div>
  </div>
  <p>COREL DRAWL</p>
  <p> </p>
  <div class="progress">
    <div class="bar animation animationwidth" data-width="85%">
      <span></span>
    </div>
  </div>
  <p>DNN</p>
  <div class="progress">
    <div class="bar animation animationwidth" 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-sm-3">
    <div class="box">
      <span class="glyphicons glyph-user"> </span>
      <span data-number="5300" class="animation  number">0</span>
      LIKES </div>
  </div>
  <div class="col-sm-3">
    <div class="box">
      <span class="glyphicons glyph-heart"> </span>
      <span data-number="10321" class="animation  number">0</span>
      PRODUCTS </div>
  </div>
  <div class="col-sm-3">
    <div class="box">
      <span class="glyphicons glyph-star"> </span>
      <span data-number="4632" class="animation  number">0</span>
      COMMENTS </div>
  </div>
  <div class="col-sm-3">
    <div class="box">
      <span class="glyphicons glyph-bookmark"> </span>
      <span data-number="6548" class="animation  number">0</span>
      DOWNLOADS </div>
  </div>
</div>