Responsive Animated Data Bars w/ Marker

In this example below you will see how to do a Responsive Animated Data Bars w/ Marker with some HTML / CSS and Javascript

Animated bars using a data-percentage attribute to draw.

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Animated Data Bars w/ Marker</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Animated Data Bars with Marker</h1>

<p><em>Animated bars using a data-percentage attribute to draw.</em></p>

<section class="data">
  <div class="measure" data-percentage="20"></div>

  <div class="bar-wrap">
    <label>Data 1</label>
    <div class="bar blue" data-percentage="94.7"></div>
  </div>
  <div class="bar-wrap">
    <label>Data 2</label>
    <div class="bar green" data-percentage="21"></div>
  </div>
  <div class="bar-wrap">
    <label>Data 3</label>
    <div class="bar red" data-percentage="78.95"></div>
  </div>
  <div class="bar-wrap">
    <label>Data 4</label>
    <div class="bar purple" data-percentage="43"></div>
  </div>
</section>

<a href="#" class="redraw button">Randomise Bars</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/responsive-animated-data-bars-with-marker-eaiAH */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 14px;
  padding: 30px;
  background: #eaeaea;
}

a.button {
  padding: 6px 14px;
  background-color: #888;
  color: #FFF;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1em;
}
a.button:hover {
  background-color: #3a3a3a;
}

h1 {
  color: #6a6a6a;
  line-height: 1.2em;
  margin: 10px 0;
  font-weight: 300;
  font-size: 3em;
}

section.data {
  position: relative;
  overflow: hidden;
  padding: 0 0 30px 0;
  margin: 0 0 40px 0;
}
section.data div.measure {
  position: absolute;
  height: 100%;
  border-right: 2px dashed #888;
  margin: 0 0 35px 0;
}
section.data div.measure:after {
  content: "Measure " attr(data-percentage) "%";
  position: absolute;
  bottom: 0px;
  right: -3px;
  background-color: #888;
  color: #FFF;
  padding: 4px 16px 4px 8px;
}

div.bar-wrap {
  width: 100%;
  display: block;
  margin: 0 0 20px 0;
  overflow: hidden;
}
div.bar-wrap label {
  font-size: 0.8em;
  color: #8a8a8a;
  text-transform: uppercase;
  margin: 0 0 2px 0;
  display: block;
}
div.bar-wrap div.bar {
  height: 40px;
  width: 0;
  position: relative;
}
div.bar-wrap div.bar:after {
  content: attr(data-percentage) "%";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  padding: 10px;
}
div.bar-wrap div.bar.blue {
  background-color: #61a7c4;
  border-bottom: 3px solid #4290b0;
}
div.bar-wrap div.bar.blue:after {
  color: #FFF;
}
div.bar-wrap div.bar.green {
  background-color: #61c471;
  border-bottom: 3px solid #42b054;
}
div.bar-wrap div.bar.green:after {
  color: #FFF;
}
div.bar-wrap div.bar.red {
  background-color: #c46161;
  border-bottom: 3px solid #b04242;
}
div.bar-wrap div.bar.red:after {
  color: #FFF;
}
div.bar-wrap div.bar.purple {
  background-color: #a461c4;
  border-bottom: 3px solid #8d42b0;
}
div.bar-wrap div.bar.purple:after {
  color: #FFF;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/responsive-animated-data-bars-with-marker-eaiAH */
$(document).ready(function(){
  $('.bar').each(function(i, elem){
    drawBar(elem);
  });
  
  $('.measure').each(function(i, elem){
    drawMeasure(elem);
  });
  
  $('a.redraw').click(function(e){
    e.preventDefault();
    $('.bar').each(function(i, elem){
      randomiseBar(elem);
    });
    $('.measure').each(function(i, elem){
      randomiseMeasure(elem);
    });
  
  });
  
  function drawBar(bar) {
    var percentage = $(bar).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(bar).animate({'width': percentage + '%'}, 'slow');
  }
  
  function randomiseBar(bar) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(bar).animate({'width': width + '%'}, 'slow');
    $(bar).attr('data-percentage', width);
  }
  
  function drawMeasure(measure) {
    var percentage = $(measure).data('percentage');
    if(percentage > 100){
      percentage = 100;
    }
    $(measure).animate({'width': percentage + '%'}, 'slow');
  }
  
  function randomiseMeasure(measure) {
    var width =  Math.floor(Math.random() * (100 - 20 + 1)) + 20;
    $(measure).animate({'width': width + '%'}, 'slow');
    $(measure).attr('data-percentage', width);
  }
  
  
});

Comments