Progress Bars and Counters

<div class="chart-list01 row">
  <div class="col-md-3 col-sm-6">
    <div class="list-percentage1 color-1" data-percent="90">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <p>WEB DESIGN</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="list-percentage1 color-2" data-percent="75">
      <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 class="list-percentage1 color-3" data-percent="82">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <p>JAVASCRIPT</p>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="list-percentage1 color-4" data-percent="63">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <p>DNN Theme</p>
  </div>
</div>

<div class="chart-list02 row">
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage2" data-percent="65">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Web Design</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage2" data-percent="70">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>HTML5 & CSS3</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage2" data-percent="85">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Graphic Design</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage2" data-percent="45">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>DNN</h6>
  </div>
</div>

<div class="chart-list03 row">
  <div class="col-sm-6 col-md-3">
    <div class="color-1">
      <div class="list-percentage3" data-percent="90">
        <div class="percentage_inner"><span>0</span>%</div>
      </div>
      <h6>Web Design</h6>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="color-2">
      <div class="list-percentage3" data-percent="63">
        <div class="percentage_inner"><span>0</span>%</div>
      </div>
      <h6>Mobile Applications</h6>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="color-3">
      <div class="list-percentage3" data-percent="32">
        <div class="percentage_inner"><span>0</span>%</div>
      </div>
      <h6>Corporate Identity</h6>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="color-4">
      <div class="list-percentage3" data-percent="50">
        <div class="percentage_inner"><span>0</span>%</div>
      </div>
      <h6>Graphic Design</h6>
    </div>
  </div>
</div>

<div class="chart-bg01 pt-60 pb-60 color-white">
  <div class="container">
    <div class="chart-list04 row">
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="99">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>Photoshop</p>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="45">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>Photograph</p>
      </div>
      <div class="clearfix visible-sm"> </div>
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="50">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>HTML</p>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="90">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>DNN Theme</p>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="85">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>Javascript</p>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="list-percentage4" data-percent="40">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <p>Illustrator</p>
      </div>
    </div>
  </div>
</div>

<div class="chart-list05 row">
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage5" data-percent="80">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Photoshop</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage5" data-percent="85">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>WordPress</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage5" data-percent="60">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>JavaScript</h6>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage5" data-percent="70">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Illustrator</h6>
  </div>
</div>

<div class="row chart-list06">
  <div class="col-sm-6 col-md-3">
    <div class="sector color-1" data-color="#eeeeee" data-fan="1:AccentColour:90% " data-size="104"> </div>
    <p>Development Cost</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color-2" data-color="#eeeeee" data-fan="2:AccentColour:75% " data-size="104"> </div>
    <p>Skin Setting</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color-3" data-color="#eeeeee" data-fan="3:AccentColour:82%" data-size="104"> </div>
    <p>Debug Modules</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="sector  color-4" data-color="#eeeeee" data-fan="4:AccentColour:35%" data-size="104"> </div>
    <p>Technology Question</p>
  </div>
</div>

<div class="chart-list07 row">
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage7" data-percent="65">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Photoshop</h6>
    <p>Donec consectetur diam ac nibh auctor ultricies.</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage7" data-percent="70">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>WordPress</h6>
    <p>Donec consectetur diam ac nibh auctor ultricies.</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage7" data-percent="85">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>JavaScript</h6>
    <p>Donec consectetur diam ac nibh auctor ultricies.</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage7" data-percent="45">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Illustrator</h6>
    <p>Donec consectetur diam ac nibh auctor ultricies.</p>
  </div>
</div>

<div class="chart-bg02 pt-60 pb-60">
  <div class="container ">
    <div class="chart-list08 row">
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage8" data-percent="65">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h6>Photoshop</h6>
        <p>Mauris sit amet enim lorem. Nulla vitaeenim pharetra imperdiet porttitor.</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage8" data-percent="70">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h6>HTML5 & CSS3</h6>
        <p>Mauris sit amet enim lorem. Nulla vitaeenim pharetra imperdiet porttitor.</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage8" data-percent="85">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h6>Graphic Design</h6>
        <p>Mauris sit amet enim lorem. Nulla vitaeenim pharetra imperdiet porttitor.</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage8" data-percent="45">
          <div class="percentage_inner"><span>0</span>%</div>
        </div>
        <h6>DNN</h6>
        <p>Mauris sit amet enim lorem. Nulla vitaeenim pharetra imperdiet porttitor.</p>
      </div>
    </div>
  </div>
</div>

<div class="chart-bg02 pt-60 pb-60">
  <div class="container ">
    <div class="chart-list09  row">
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage9" data-percent="75">
          <div class="percentage_inner"><span>0</span>%</div>
          <h6>Adobe Photoshop</h6>
        </div>
        <p>Praesent turpis mauris, aliquet id</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage9" data-percent="87">
          <div class="percentage_inner"><span>0</span>%</div>
          <h6>WordPress</h6>
        </div>
        <p>Praesent turpis mauris, aliquet id</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage9" data-percent="63">
          <div class="percentage_inner"><span>0</span>%</div>
          <h6>HTML5 & CSS3</h6>
        </div>
        <p>Praesent turpis mauris, aliquet id</p>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="list-percentage9" data-percent="60">
          <div class="percentage_inner"><span>0</span>%</div>
          <h6>Adobe Illustrator</h6>
        </div>
        <p>Praesent turpis mauris, aliquet id</p>
      </div>
    </div>
  </div>
</div>

<div class="chart-list10 row">
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage10" data-percent="30">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Adobe Photoshop</h6>
    <p>Praesent turpis mauris, aliquet id</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage10" data-percent="45">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>WordPress</h6>
    <p>Praesent turpis mauris, aliquet id</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage10" data-percent="75">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>HTML5 & CSS3</h6>
    <p>Praesent turpis mauris, aliquet id</p>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="list-percentage10" data-percent="30">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h6>Adobe Illustrator</h6>
    <p>Praesent turpis mauris, aliquet id</p>
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="loaded-list01">
      <div class="loaded-decorate01 color-1" data-percent="80">
        <div class="fa fa-user"> </div>
      </div>
      <div class="animation number" data-number="3785">0</div>
      <div class="title">Work</div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="loaded-list01">
      <div class="loaded-decorate01 color-2" data-percent="70">
        <div class="fa fa-lightbulb-o"> </div>
      </div>
      <div class="animation number" data-number="8062">0</div>
      <div class="title">Work</div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="loaded-list01">
      <div class="loaded-decorate01 color-3" data-percent="70">
        <div class="fa fa-paint-brush"> </div>
      </div>
      <div class="animation number" data-number="5746">0</div>
      <div class="title">Work</div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="loaded-list01">
      <div class="loaded-decorate01 color-4" data-percent="70">
        <div class="fa  fa-thumbs-o-up"> </div>
      </div>
      <div class="animation number" data-number="1586">0</div>
      <div class="title">Work</div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="loaded-list02">
      <p>Web Design</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-1" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="loaded-list03">
      <p>Web Design</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-1" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped active">
        <div class="bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

<div class="chart-bg03 color-white">
  <div class="container pt-60 pb-60">
    <div class="loaded-list04">
      <p>Web Design</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="59%"><span> </span></div>
      </div>
      <p>Html5 & Css3</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

<div class="chart-bg03 color-white">
  <div class="container pt-60 pb-60">
    <div class="loaded-list05">
      <p>Web Design</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="59%"><span> </span></div>
      </div>
      <p>Html5 & Css3</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress">
        <div class="bar animation animationwidth" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="loaded-list06">
      <p>Web Design</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-1" data-width="75%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="loaded-list07">
      <p>Web Design</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-1" data-width="75%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped active">
        <div class="progress-bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

<div class="loaded-list08">
  <p>Web Design</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth " data-width="72%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth " data-width="59%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth " data-width="80%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth " data-width="46%"><span> </span></div>
  </div>
</div>

<div class="loaded-list09">
  <p>Web Design</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth color-1" data-width="72%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth color-2" data-width="59%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth color-3" data-width="80%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress progress-striped ">
    <div class="progress-bar animation animationwidth color-4" data-width="46%"><span> </span></div>
  </div>
</div>

<div class="chart-bg04 pt-60 pb-40">
<div class="container ">
  <div class="row">
    <div class="col-md-12">
      <div class="loaded-list10">
        <p>Web Design</p>
        <div class="progress progress-striped ">
          <div class="progress-bg"> </div>
          <div class="progress-bar animation animationwidth " data-width="72%"><span> </span></div>
        </div>
        <p>Photoshop</p>
        <div class="progress progress-striped ">
          <div class="progress-bg"> </div>
          <div class="progress-bar animation animationwidth " data-width="70%"><span> </span></div>
        </div>
        <p>HTML5 & CSS3</p>
        <div class="progress progress-striped ">
          <div class="progress-bg"> </div>
          <div class="progress-bar animation animationwidth " data-width="80%"><span> </span></div>
        </div>
        <p>Javascript</p>
        <div class="progress progress-striped ">
          <div class="progress-bg"> </div>
          <div class="progress-bar animation animationwidth " data-width="46%"><span> </span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="loaded-list11">
  <div class="color-1 progress progress-striped active">
    <p>Web Design</p>
    <div class="bar animation animationwidth" data-width="72%"><span> </span></div>
  </div>
  <div class="color-2 progress progress-striped active">
    <p>Photoshop</p>
    <div class="bar animation animationwidth" data-width="80%"><span> </span></div>
  </div>
  <div class="color-3 progress progress-striped active">
    <p>HTML5 & CSS3</p>
    <div class="bar animation animationwidth" data-width="62%"><span> </span></div>
  </div>
  <div class="color-4 progress progress-striped active">
    <p>Javascript</p>
    <div class="bar animation animationwidth" data-width="46%"><span> </span></div>
  </div>
</div>

<div class="loaded-list12">
  <div class="color-1 progress progress-striped active">
    <p>Web Design</p>
    <div class="bar animation animationwidth" data-width="72%"><span> </span></div>
  </div>
  <div class="color-2 progress progress-striped active">
    <p>Photoshop</p>
    <div class="bar animation animationwidth" data-width="80%"><span> </span></div>
  </div>
  <div class="color-3 progress progress-striped active">
    <p>HTML5 & CSS3</p>
    <div class="bar animation animationwidth" data-width="62%"><span> </span></div>
  </div>
  <div class="color-4 progress progress-striped active">
    <p>Javascript</p>
    <div class="bar animation animationwidth" data-width="46%"><span> </span></div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="loaded-list13">
      <p>Web Design</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-1" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="loaded-list14">
      <p>Web Design</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-1" data-width="72%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-2" data-width="59%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-3" data-width="80%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress progress-striped">
        <div class="bar animation animationwidth color-4" data-width="46%"><span> </span></div>
      </div>
    </div>
  </div>
</div>