Today In this article, we’ll show you how to create Animated Progress Bar With Counter Using HTML, CSS and Bootstrap. This type of Bootstrap Progress Bar is used on the websites For Skills, Percentage and etc. This kind of Bootstrap Progress Bar Design looks attractive on the website.
You easily create this Animated Progress Bar With Counter Using HTML, CSS and Bootstrap. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and bootstrap then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Bootstrap Progress Bar
Basically, there are five-line progress bar. here is one of the most relevant progress bars with the skill titles and their progress percentages. This progress bar is purely based on HTML, CSS & Bootstrap only and this bar also has animation, which means when you reload your webpage, this skill bar fill by the percentage with awesome progress. Progress Percentage also animate with progress bar.
Preview Of Bootstrap Progress Bar
See this video preview to get an idea of how this Bootstrap Progress Bar work with animation.
Hopefully, the above demo has helped you to create this Bootstrap Progress Bar Tutorial. If you like the video, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- 14+ Responsive Bootstrap Footer Examples
- CSS Animated Tabs With Slide Indicator
- Automatic Image Slider Using HTML, CSS & JS
Bootstrap Progress Bar | Source Codes
You have to create an HTML, CSS and JS File For this Bootstrap Progress Bar. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Portfolio Website</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<!--<h2 class="text-center">Scroll down the page a bit</h2><br><br> -->
<div class="container">
<div class="row">
<div class="col-md-2 col-lg-2"></div>
<div class="col-md-8 col-lg-8">
<div class="barWrapper">
<span class="progressText"><B>HTML5</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" >
<span class="popOver" data-toggle="tooltip" data-placement="top" title="85%"> </span>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>CSS3</B></span>
<div class="progress ">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="10" aria-valuemax="100" style="">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="75%"> </span>
</div>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>BOOTSTRAP</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="65%"> </span>
</div>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>JQUERY</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="55%"> </span>
</div>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>MYSQL</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="70%"> </span>
</div>
</div>
</div>
<div class="barWrapper">
<span class="progressText"><B>PHP</B></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span class="popOver" data-toggle="tooltip" data-placement="top" title="75%"> </span>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2"></div>
</div>
</div>
</section>
<script src="js.js"></script>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
.tooltip{
position:relative;
float:right;
}
.tooltip > .tooltip-inner {background-color: #eebf3f; padding:5px 15px; color:rgb(23,44,66); font-weight:bold; font-size:13px;}
.popOver + .tooltip > .tooltip-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #eebf3f;}
section{
margin:100px auto;
height:1000px;
}
.progress{
border-radius:0;
overflow:visible;
}
.progress-bar{
background:rgb(23,44,60);
-webkit-transition: width 1.5s ease-in-out;
transition: width 1.5s ease-in-out;
}
the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
$(function () {
$('[data-toggle="tooltip"]').tooltip({trigger: 'manual'}).tooltip('show');
});
// $( window ).scroll(function() {
// if($( window ).scrollTop() > 10){ // scroll down abit and get the action
$(".progress-bar").each(function(){
each_bar_width = $(this).attr('aria-valuenow');
$(this).width(each_bar_width + '%');
});
// }
// });
now you’ve successfully created these Bootstrap Progress Bar HTML, CSS & JavaScript. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
