ProgressBars

<div class="dg-loadlist13 dot">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-pink " data-width="78%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="92%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent2" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent3" data-width="85%"><span> </span></div>
  </div>
</div>

Progress Bars 02

<div class="dg-loadlist13">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-pink " data-width="78%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="92%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent2" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent3" data-width="85%"><span> </span></div>
  </div>
</div>

<div class="dg-loadlist14">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent " data-width="80%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="70%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent" data-width="86%"><span> </span></div>
  </div>
</div>

Progress Bars 02

<div class="dg-loadlist15">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent " data-width="85%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="73%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="79%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent" data-width="70%"><span> </span></div>
  </div>
</div>

<div class="shortcodes-bg04 pb-60 pt-60">
  <div class="container">
    <div class="dg-loadlist16">
      <p>Web Design</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-white" data-width="80%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-white" data-width="70%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-white" data-width="95%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress ">
        <div class="bar animation animationwidth bg-white" data-width="86%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

Progress Bars 02

<div class="shortcodes-bg04 pb-60 pt-60">
  <div class="container">
    <div class="dg-loadlist17">
      <p>Web Design</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-accent " data-width="85%"><span> </span></div>
      </div>
      <p>Photoshop</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-accent" data-width="73%"><span> </span></div>
      </div>
      <p>HTML5 & CSS3</p>
      <div class="progress">
        <div class="bar animation animationwidth bg-accent" data-width="79%"><span> </span></div>
      </div>
      <p>Javascript</p>
      <div class="progress ">
        <div class="bar animation animationwidth bg-accent" data-width="70%"><span> </span></div>
      </div>
    </div>
  </div>
</div>

<div class="dg-loadlist18">
  <p>Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="78%"><span> </span></div>
  </div>
  <p>Html5</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="92%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="95%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent" data-width="85%"><span> </span></div>
  </div>
</div>

Progress Bars 02

<div class="dg-loadlist19">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="78%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="92%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent" data-width="85%"><span> </span></div>
  </div>
</div>

<div class="dg-loadlist20">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="72%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent3" data-width="59%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent2" data-width="80%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-pink" data-width="87%"><span> </span></div>
  </div>
</div>

Progress Bars 02

<div class="dg-loadlist21">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="78%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent3" data-width="92%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent2" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-pink" data-width="85%"><span> </span></div>
  </div>
</div>

<div class="dg-loadlist22">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent color-accent" data-width="72%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent color-accent" data-width="59%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent color-accent" data-width="80%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent color-accent" data-width="87%"><span> </span></div>
  </div>
</div>

Progress Bars 02

<div class="dg-loadlist23">
  <p>Web Design</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="78%"><span> </span></div>
  </div>
  <p>Photoshop</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="92%"><span> </span></div>
  </div>
  <p>HTML5 & CSS3</p>
  <div class="progress">
    <div class="bar animation animationwidth bg-accent" data-width="95%"><span> </span></div>
  </div>
  <p>Javascript</p>
  <div class="progress ">
    <div class="bar animation animationwidth bg-accent" data-width="85%"><span> </span></div>
  </div>
</div>

<div class="shortcodes-bg05 pb-60 pt-80">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 pl-50 pr-50">
        <div class="dg-chartlist01 row color-white">
          <div class="col-sm-6 col-md-3">
            <div class="decorate color-accent" data-linewidth="10" data-percent="95" data-size="220" data-trackcolor="rgba(255,255,255,0.2)">
              <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h3>Wordpress 3.0</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, velit.</p>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="decorate color-warning" data-linewidth="10" data-percent="73" data-size="220" data-trackcolor="rgba(255,255,255,0.2)">
              <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h3>Javascript</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, velit.</p>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="decorate color-seagreen" data-linewidth="10" data-percent="100" data-size="220" data-trackcolor="rgba(255,255,255,0.2)">
              <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h3>Create Website</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, velit.</p>
          </div>
          <div class="col-sm-6 col-md-3">
            <div class="decorate color-accent2" data-linewidth="10" data-percent="82" data-size="220" data-trackcolor="rgba(255,255,255,0.2)">
              <div class="percentage_inner"><span>0</span>%</div>
            </div>
            <h3>App Development</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, velit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="dg-chartlist02 pl-60 pr-60">
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="95" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>Photoshop</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="83" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>Illustractor</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="78" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>JavaScript</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="85" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>HTML5 & CSS3</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="75" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>PHP</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="col-lg-2 col-md-4">
    <div class="decorate color-accent" data-linewidth="3" data-percent="83" data-size="147" data-trackcolor="transparent">
      <div class="percentage_inner"><span>0</span>%</div>
    </div>
    <h3>Illustractor</h3>
    <p>Mauris ametion nerolad lorem etra porttitor.</p>
  </div>
  <div class="clearfix"> </div>
</div>

<div class="shortcodes-bg06 pb-60 pt-60">
  <div class="container">
    <div class="pl-50 pr-50">
      <div class="dg-chartlist03 row">
        <div class="col-sm-6 col-md-3">
          <div class="decorate color-warning" data-linecap="butt" data-linewidth="8" data-percent="73" data-size="173" data-trackcolor="rgba(255,255,255,0.2)">
            <div class="percentage_inner color-white"><span>0</span>%</div>
          </div>
          <h5>Photoshop</h5>
          <small>Sed ut persp</small></div>
        <div class="col-sm-6 col-md-3">
          <div class="decorate color-seagreen" data-linecap="butt" data-linewidth="8" data-percent="87" data-size="173" data-trackcolor="rgba(255,255,255,0.2)">
            <div class="percentage_inner color-white"><span>0</span>%</div>
          </div>
          <h5>Illustrator</h5>
          <small>Sed ut persp</small></div>
        <div class="col-sm-6 col-md-3">
          <div class="decorate color-accent2" data-linecap="butt" data-linewidth="8" data-percent="83" data-size="173" data-trackcolor="rgba(255,255,255,0.2)">
            <div class="percentage_inner color-white"><span>0</span>%</div>
          </div>
          <h5>Javascript</h5>
          <small>Sed ut persp</small></div>
        <div class="col-sm-6 col-md-3">
          <div class="decorate color-accent" data-linecap="butt" data-linewidth="8" data-percent="93" data-size="173" data-trackcolor="rgba(255,255,255,0.2)">
            <div class="percentage_inner color-white"><span>0</span>%</div>
          </div>
          <h5>PHP</h5>
          <small>Sed ut persp</small></div>
      </div>
    </div>
  </div>
</div>