Animated SKills Bar Design - Css Animation Effects - Pure Html5 CSS3 Tutorial

md.shakil hossain

1328

 
<div class="wrapper">
  <h4>10 HTML 5 CSS - jQuery Animated Multicolored Prgress Bar</h4>
  <h3 class="gapefruit">Gapefruit - Progress Bar</h3>
  <div class="bar">
    <span class="fill gapefruit-dark"></span>
  </div>
  <div class="bar">
    <span class="fill gapefruit-light"></span>
  </div>

<h3 class="bittersweet">Bittersweet - Progress Bar</h3>
  <div class="bar">
    <span class="fill bittersweet-dark"></span>
  </div>
  <div class="bar">
    <span class="fill bittersweet-light"></span>
  </div>

<h3 class="sunflower">Sunflower - Progress Bar</h3>
  <div class="bar">
    <span class="fill sunflower-dark"></span>
  </div>
  <div class="bar">
    <span class="fill sunflower-light"></span>
  </div>
  
  <h3 class="grass">Grass - Progress Bar</h3>
  <div class="bar">
    <span class="fill grass-dark"></span>
  </div>
  <div class="bar">
    <span class="fill grass-light"></span>
  </div>
  
  <h3 class="mint">Mint - Progress Bar</h3>
  <div class="bar">
    <span class="fill mint-dark"></span>
  </div>
  <div class="bar">
    <span class="fill mint-light"></span>
  </div>
  
  <h3 class="aqua">Aqua - Progress Bar</h3>
  <div class="bar">
    <span class="fill aqua-dark"></span>
  </div>
  <div class="bar">
    <span class="fill aqua-light"></span>
  </div>
  
  <h3 class="blue-jeans">Blue Jeans - Progress Bar</h3>
  <div class="bar">
    <span class="fill blue-jeans-dark"></span>
  </div>
  <div class="bar">
    <span class="fill blue-jeans-light"></span>
  </div>
  
  <h3 class="lavander">Lavander - Progress Bar</h3>
  <div class="bar">
    <span class="fill lavander-dark"></span>
  </div>
  <div class="bar">
    <span class="fill lavander-light"></span>
  </div>
  <h3 class="pink-rose">Pink Rose - Progress Bar</h3>
  <div class="bar">
    <span class="fill pink-rose-dark"></span>
  </div>
  <div class="bar">
    <span class="fill pink-rose-light"></span>
  </div>
  
  <h3 class="gray">Gray - Progress Bar</h3>
  <div class="bar">
    <span class="fill gray-dark"></span>
  </div>
  <div class="bar">
    <span class="fill gray-light"></span>
  </div>
  
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Try it Yourself >>



body{
  background-color:#dedede;
}
.wrapper{
     width:500px;  
     margin:10% auto;
}
h4{
  text-align:center;
}
h3{
  font-size:20px;
  font-weight:bolder;
  text-shadow:2px 1px #fff;
}
h3.gapefruit{
  color:#da4453;
}
h3.bittersweet{
  color:#fc6d58;
}
h3.sunflower{
  color:#ffcd69;
}
h3.grass{
  color:#9fd477;
}
h3.mint{
  color:#34bc9d;
}
h3.aqua{
  color:#4fc2e5;
}
h3.blue-jeans{
  color:#5e9de6;
}
h3.lavander{
  color:#ad93e6;
}
h3.pink-rose{
  color:#ed87bd;
}
h3.gray{
  color:#434a53;
}
.bar{  
     width:100%;  
     background-color:#eeeeee;
     padding:3px;  
     border-radius:3px;
     margin-bottom:10px;  
}  
.fill{  
     height:22px;  
     display:block; 
     border-radius:3px;  
     width:0%;
     transition: width 500ms ease-in-out;  
}
.gapefruit-dark{
     background-color:#da4453; 
}
.gapefruit-light{
     background-color:#ed5565; 
}

.bittersweet-dark{
     background-color:#e95546; 
}
.bittersweet-light{
     background-color:#fc6d58; 
}

.sunflower-dark{
     background-color:#f6ba59; 
}
.sunflower-light{
     background-color:#ffcd69; 
}

.grass-dark{
     background-color:#8bc163; 
}
.grass-light{
     background-color:#9fd477; 
}

.mint-dark{
     background-color:#34bc9d; 
}
.mint-light{
     background-color:#46cfb0; 
}

.aqua-dark{
     background-color:#3bb0d6; 
}
.aqua-light{
     background-color:#4fc2e5; 
}

.blue-jeans-dark{
     background-color:#4b8ad6; 
}
.blue-jeans-light{
     background-color:#5e9de6; 
}

.lavander-dark{
     background-color:#977bd5; 
}
.lavander-light{
     background-color:#ad93e6; 
}

.pink-rose-dark{
     background-color:#d870a9; 
}
.pink-rose-light{
     background-color:#ed87bd; 
}

.gray-dark{
     background-color:#434a53; 
}
.gray-light{
     background-color:#e9e9ee; 
}

 /* 
// HTML5 CSS - jQuery Animated Multicolored Prgress Bar
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

body{
  background-color:#dedede;
}
.wrapper{
     width:500px;  
     margin:10% auto;
}
h4{
  text-align:center;
}
h3{
  font-size:20px;
  font-weight:bolder;
  text-shadow:2px 1px #fff;
}
h3.gapefruit{
  color:#da4453;
}
h3.bittersweet{
  color:#fc6d58;
}
h3.sunflower{
  color:#ffcd69;
}
h3.grass{
  color:#9fd477;
}
h3.mint{
  color:#34bc9d;
}
h3.aqua{
  color:#4fc2e5;
}
h3.blue-jeans{
  color:#5e9de6;
}
h3.lavander{
  color:#ad93e6;
}
h3.pink-rose{
  color:#ed87bd;
}
h3.gray{
  color:#434a53;
}
.bar{  
     width:100%;  
     background-color:#eeeeee;
     padding:3px;  
     border-radius:3px;
     margin-bottom:10px;  
}  
.fill{  
     height:22px;  
     display:block; 
     border-radius:3px;  
     width:0%;
     transition: width 500ms ease-in-out;  
}
.gapefruit-dark{
     background-color:#da4453; 
}
.gapefruit-light{
     background-color:#ed5565; 
}

.bittersweet-dark{
     background-color:#e95546; 
}
.bittersweet-light{
     background-color:#fc6d58; 
}

.sunflower-dark{
     background-color:#f6ba59; 
}
.sunflower-light{
     background-color:#ffcd69; 
}

.grass-dark{
     background-color:#8bc163; 
}
.grass-light{
     background-color:#9fd477; 
}

.mint-dark{
     background-color:#34bc9d; 
}
.mint-light{
     background-color:#46cfb0; 
}

.aqua-dark{
     background-color:#3bb0d6; 
}
.aqua-light{
     background-color:#4fc2e5; 
}

.blue-jeans-dark{
     background-color:#4b8ad6; 
}
.blue-jeans-light{
     background-color:#5e9de6; 
}

.lavander-dark{
     background-color:#977bd5; 
}
.lavander-light{
     background-color:#ad93e6; 
}

.pink-rose-dark{
     background-color:#d870a9; 
}
.pink-rose-light{
     background-color:#ed87bd; 
}

.gray-dark{
     background-color:#434a53; 
}
.gray-light{
     background-color:#e9e9ee; 
}

Try it Yourself >>

$(document).ready(function(){  
var size = 0;  
var interval = setInterval(function(){  
size = size + 10;  
$('span').css('width', size + '%');  
if(size >= 100)  
{  
clearInterval(interval);  
}  
}, 1000);  
});

Try it Yourself >>