"Super Smooth Scroll Animated Progress Bar"
Bootstrap 4.0.0 Snippet by nababur

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2><strong>Super Smooth Scroll Animated Progress Bar By </strong> <a href="https://goo.gl/pR8ito" target="_blank">Nababur</a> <br/>Please scroll up and down then you can see animate effect.</h2> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="skills"> <!-- Start Skill --> <div class="skill"> <h4>HTML5</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" data-width="88%"> <span class="percent">88</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Responsive </h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-width="20%"> <span class="percent">20</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>javascripts</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-width="70%"> <span class="percent">70</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Jason</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" data-width="88%"> <span class="percent">88</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Mysql</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" data-width="55%"> <span class="percent">55</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>CSS3</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" data-width="65%"> <span class="percent">65</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>WordPress</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-width="75%"> <span class="percent">75</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>jQuery</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" data-width="35%"> <span class="percent">35</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Youtube</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" data-width="65%"> <span class="percent">65</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>PHP</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" data-width="100%"> <span class="percent">100</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Ruby</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" data-width="33%"> <span class="percent">33</span> </div> </div> </div> <!-- End Skill --> <!-- Start Skill --> <div class="skill"> <h4>Python</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" data-width="90%"> <span class="percent">90</span> </div> </div> </div> <!-- End Skill --> </div> </div> </div> </div>
.skill h4{color: #5f5d5d;font-size: 22px;font-weight: 400;margin-bottom:20px} #skills .skill .progress {overflow: visible;background-color: #ddd;-webkit-box-shadow: none; box-shadow: none; height: 10px;} #skills .skill .progress .progress-bar {background-color: #498bfc;position: relative;-webkit-transition: all 1s ease;transition: all 1s ease;} #skills .skill .progress .progress-bar .percent {position: absolute;width: 40px;height: 40px;line-height: 40px;border-radius: 50%;text-align: center;background-color: #498bfc;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);top: -15px;right: -20px;font-size: 16px;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;} #skills .skill + .skill {margin-top: 35px;}
// Skills Progress Active js $(window).on("scroll", function() { var bar = $("#skills .progress-bar"), barPos, windowBtm = $(window).scrollTop() + $(window).height(); bar.each(function () { barPos = $(this).offset().top; if(barPos <= windowBtm - 50) { $(this).css("width", function() { return $(this).attr("data-width"); }); $(this).children(".percent").css({ '-webkit-transform': 'scale(1)', '-moz-transform': 'scale(1)', '-ms-transform': 'scale(1)', '-o-transform': 'scale(1)', 'transform': 'scale(1)' }); } }); });

Related: See More


Questions / Comments: