Simple Animated Progress Bar

In this example below you will see how to do a Simple Animated Progress Bar with some HTML / CSS and Javascript

This is a simple example of animated progress bars, common used for display skills, percentage of tasks and much more.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Simple Animated Progress Bar</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


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

  
</head>

<body>

  <h2 class="titulo">Progress Bars by Luan Piegas</h2>
<div class="barras">
  <div class="barra">
     <div class="barra-nivel" data-nivel="80%"></div>
  </div>
  <div class="barra">
     <div class="barra-nivel" data-nivel="57%"></div>
  </div>
  <div class="barra">
     <div class="barra-nivel" data-nivel="94%"></div>
  </div>
</div>
  <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/luanpiegas/simple-animated-progress-bar-VYQoxJ */
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.titulo {
  font-family:"Montserrat"; 
  font-size:20px; 
  text-align:center; 
  color:#999;
}
.barras {
  width:320px; 
  margin:10px auto;
}
.barra {
  width:300px; 
  height:30px; 
  background:#CCC; 
  margin:10px;
}
.barra-nivel {
  height:30px; 
  background:#444;
  width:1px;
  transition: width 1s ease;
}
.valor-nivel {
  line-height:30px; 
  color:#fff; 
  margin-left:10px; 
  font-family:"Montserrat"; 
  font-size:12px;
}

/*Downloaded from https://www.codeseek.co/luanpiegas/simple-animated-progress-bar-VYQoxJ */
$('.barra-nivel').each(function() {
  var valorLargura = $(this).data('nivel');
  var valorNivel = $(this).html("<span class='valor-nivel'>"+valorLargura+"</span>");
    $(this).animate({
        width: valorLargura
    });
});

Comments