DocSF

DocSF

Did You Know?

We design Docy for the readers, optimizing not for page views or engagement

JavaScript Animated Bar Graph

HTML

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Electrolize&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
   <div class="wrap">
<h1>JavaScript Animated Bar Graphs</h1>
<div class="holder"><div class="bar " data-percent="95%"><span class="label">HTML</span></div>
<div class="bar" data-percent="80%"><span class="label second">CSS</span></div>
<div class="bar" data-percent="65%"><span class="label">JavaScript</span></div>
<div class="bar" data-percent="75%"><span class="label second">jQuery</span></div>
<div class="bar" data-percent="90%"><span class="label">Bootstrap</span></div>
<div class="bar" data-percent="40%"><span class="label second">React</span></div>
<div class="bar" data-percent="45%"><span class="label ">Vue</span></div>
<div class="bar" data-percent="50%"><span class="label second">Angular</span></div>
<div class="bar" data-percent="95%"><span class="label">CMS</span></div>
<div class="bar" data-percent="70%"><span class="label second">Node JS</span></div>
  </div>
 
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>
 
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-family: 'Electrolize', sans-serif;
}
body {
  color: #212121;
  -webkit-font-smoothing: antialiased;
  padding: 2%;
  line-height: 1;
}
h1 {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 2px solid #212121;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.wrap {
  width: 50%;
  margin: 0 auto;
}
.bar {
  background: #ff413d;
  width: 0;
  margin: .25em 0;
  color: #fff;
  position: relative;
  transition: width 2s, background .2s;
  -webkit-transform: translate3d(0, 0, 0);
  clear: both;
}
.bar:nth-of-type(odd) {
  background: #ff6461;
}
.bar .label {
  font-size: .75em;
  padding: 1em;
  background: #212121;
  width: 7em;
  display: inline-block;
  position: relative;
  z-index: 2;
  font-weight: bold;
}
.bar .label.second {
  background: #333;
}
.count {
  position: absolute;
  right: .25em;
  top: .75em;
  padding: .15em;
  font-size: .75em;
  font-weight: bold;
}

Js

setTimeout(function start (){
  
  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $bar.attr('data-percent'));      
    }, i*100);
  });
 
$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) +'%');
        }
    });
});
 
}, 500)

Related Post

Salesforce Big Object

Trailhead Punti chiave dei Big Object An index mu...

Cosa sono le opzioni binarie?

Le opzioni binarie in Italia trovano consenso ad inizio...

Bond Gold Morningstar

Di seguito abbiamo elencato i fondi disponibili alle ve...

Leave a Comment