DNNGo demo dnn skin unlimited color pack 054 > Feature > Short Codes

ProgressBars Counters

> >

WEB DESIGN

HTML5 & CSS3

JAVASCRIPT

SOURCE CODE

<div class="chart_list_1 row">
  <div class="col-md-3 col-sm-6">
    <div data-percent="90" class="percentage1 color_1">
      <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="75" class="percentage1 color_2">
      <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="82" class="percentage1 color_3">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <p>JAVASCRIPT</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div data-percent="63" class="percentage1 color_4">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <p>JAVASCRIPT</p>
  </div>
</div>

Web Design

Photoshop

Html5 & Css3

Javascript

SOURCE CODE

<div class="loaded_list_1">
  <p>Web Design</p>
  <div class="progress">
    <div data-width="72%" class="bar animation animationwidth color_bg_1"> <span></span> </div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div data-width="59%" class="bar animation animationwidth color_bg_2"> <span></span> </div>
  </div>
  <p>Html5 & Css3</p>
  <p> </p>
  <div class="progress">
    <div data-width="80%" class="bar animation animationwidth color_bg_3"> <span></span> </div>
  </div>
  <p>Javascript</p>
  <div class="progress">
    <div data-width="46%" class="bar animation animationwidth color_bg_4"> <span></span> </div>
  </div>
</div>

Web Design

Photoshop

Html5 & Css3

Javascript

SOURCE CODE

<div class="loaded_list_1">
  <p>Web Design</p>
  <div class="progress">
    <div data-width="72%" class="bar animation animationwidth color_bg_1"> <span></span> </div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div data-width="59%" class="bar animation animationwidth color_bg_2"> <span></span> </div>
  </div>
  <p>Html5 & Css3</p>
  <p> </p>
  <div class="progress">
    <div data-width="80%" class="bar animation animationwidth color_bg_3"> <span></span> </div>
  </div>
  <p>Javascript</p>
  <div class="progress">
    <div data-width="46%" class="bar animation animationwidth color_bg_4"> <span></span> </div>
  </div>
</div>

Clients

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.

Hot Skins

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.

Reviews

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.

Praises

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.

SOURCE CODE

<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="ServeList_4">
      <div data-percent="100" class="decorate color_1">
        <div class="fa fa-user"> </div>
      </div>
      <div class="animation number" data-number="8036">0</div>
      <div class="title">Clients</div>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem  massa quismollis pretium. </p>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="ServeList_4">
      <div data-percent="100" class="decorate color_2">
        <div class="fa fa-lightbulb-o"> </div>
      </div>
      <div class="animation number" data-number="9750">0</div>
      <div class="title">Hot Skins</div>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem  massa quismollis pretium. </p>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="ServeList_4">
      <div data-percent="100" class="decorate color_3">
        <div class="fa fa-paint-brush"> </div>
      </div>
      <div class="animation number" data-number="10002">0</div>
      <div class="title">Reviews</div>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem  massa quismollis pretium. </p>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="ServeList_4">
      <div data-percent="100" class="decorate color_4">
        <div class="fa  fa-thumbs-o-up"> </div>
      </div>
      <div class="animation number" data-number="21040">0</div>
      <div class="title">Praises</div>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem  massa quismollis pretium. </p>
    </div>
  </div>
</div>

Web Design

72%

Photoshop

59%

Html5 & Css3

80%

Javascript

46%

Web Design

72%

Photoshop

59%

Html5 & Css3

80%

Javascript

46%

SOURCE CODE

<div class="row">
        <div class="col-md-6">
          <div class="loaded_list_5">
            <p>Web Design</p>
            <div class="progress">
              <div data-width="72%" class="bar animation animationwidth"> <span>72%</span> </div>
            </div>
            <p>Photoshop</p>
            <div class="progress">
              <div data-width="59%" class="bar animation animationwidth"> <span>59%</span> </div>
            </div>
            <p>Html5 & Css3</p>
            <p> </p>
            <div class="progress">
              <div data-width="80%" class="bar animation animationwidth"> <span>80%</span> </div>
            </div>
            <p>Javascript</p>
            <div class="progress">
              <div data-width="46%" class="bar animation animationwidth"> <span>46%</span> </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="loaded_list_5">
            <p>Web Design</p>
            <div class="progress">
              <div data-width="72%" class="bar animation animationwidth"> <span>72%</span> </div>
            </div>
            <p>Photoshop</p>
            <div class="progress">
              <div data-width="59%" class="bar animation animationwidth"> <span>59%</span> </div>
            </div>
            <p>Html5 & Css3</p>
            <p> </p>
            <div class="progress">
              <div data-width="80%" class="bar animation animationwidth"> <span>80%</span> </div>
            </div>
            <p>Javascript</p>
            <div class="progress">
              <div data-width="46%" class="bar animation animationwidth"> <span>46%</span> </div>
            </div>
          </div>
        </div>
      </div>

Deveop Cost

Skin Setting

Debug Modules

Technology Question

SOURCE CODE

<div class="row">
  <div class="col-sm-6 col-md-3">
    <div class="sector color_1" data-fan="1:AccentColour:90% " data-color="#eeeeee" data-size="110"> </div>
    <p style="text-align: center;">Deveop Cost</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color_2" data-fan="2:AccentColour:75% " data-color="#eeeeee" data-size="110"> </div>
    <p style="text-align: center;">Skin Setting</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color_3" data-fan="3:AccentColour:82%" data-color="#eeeeee" data-size="110"> </div>
    <p style="text-align: center;">Debug Modules</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color_4" data-fan="4:AccentColour:35%" data-color="#eeeeee" data-size="110"> </div>
    <p style="text-align: center;">Technology Question</p>
  </div>
</div>

Web Design

Photoshop

Html5 & Css3

Javascript

SOURCE CODE

<div class="loaded_list_6">
  <p>Web Design</p>
  <div class="progress">
    <div data-width="72%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div data-width="59%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Html5 & Css3</p>
  <p> </p>
  <div class="progress">
    <div data-width="80%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Javascript</p>
  <div class="progress">
    <div data-width="46%" class="bar animation animationwidth"> <span></span> </div>
  </div>
</div>

Web Design

Photoshop

Html5 & Css3

Javascript

SOURCE CODE

<div class="loaded_list_6">
  <p>Web Design</p>
  <div class="progress">
    <div data-width="72%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div data-width="59%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Html5 & Css3</p>
  <p> </p>
  <div class="progress">
    <div data-width="80%" class="bar animation animationwidth"> <span></span> </div>
  </div>
  <p>Javascript</p>
  <div class="progress">
    <div data-width="46%" class="bar animation animationwidth"> <span></span> </div>
  </div>
</div>

Weather Report

ProgressBars Counters

Get Connected