ProgressBars
Click to preview the ProgressBars & Counters demo. View demo
Progress Bars Style 01
Code:
html
<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>Progress Bars Style 02
Code:
html
<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>Progress Bars Style 03
Code:
html
<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>Progress Bars Style 04
Code:
html
<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>Progress Bars Style 05
Code:
html
<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>Progress Bars Style 06
Code:
html
<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>Progress Bars Style 07
Code:
html
<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>Progress Bars Style 08
Code:
html
<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>Progress Bars Style 09
Code:
html
<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>Progress Bars Style 10
Code:
html
<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>Progress Bars Style 11
Code:
html
<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>Progress Bars Style 12
Code:
html
<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>Progress Bars Style 13
Code:
html
<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>Progress Bars Style 14
Code:
html
<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>Progress Bars Style 15
Code:
html
<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>Progress Bars Style 16
Code:
html
<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>Progress Bars Style 17
Code:
html
<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>Progress Bars Style 18
Code:
html
<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>