Simple Small Progress Percentage Bar Using Custom CSS and jQuery

Small and easily customizable percentage progress bar can be help full in some cases when you want to show quick inline graphs or data notations. If the requirement is simple, we can’t proffer heavy libraries. For the same reason, I have written a small jQuery function to draw an animated progress bar. I have added some custom option which user can easily change in HTML attribute it self.

We can change Height, Width, Background or Bar color, Speed of animation. You can suggest me if other features can be added.

See working Demo here

Let’s begin implementation.✌

Step 1) We need to include a jQuery library on our page.

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Step 2) Add CSS styling.

<style>
.progress {
  width:100px;
  height: 100%;
}
.progress-wrap {
  background: #dcdcdc;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  
}
.progress-bar {
    background:#249c23;
    left: 0;
    position: absolute;
    top: 0;
	width:0%;
}
</style>

Step 3) Custom jQuery function which will be called on page load. The code is simple and self-explanatory. This code is iterating all wrappers with selector class “.progress-wrap”. It will get respective HTML attribute option and implement on page load.

$(document).ready(function(){
	var progressSelector = $(".progress-wrap");
	progressSelector.each(function(){
		var getPercent = $(this).attr("data-progresspercent");
		var getSpeed = parseInt($(this).attr("data-speed"));
		var getColor = $(this).attr("data-color");
		var getHeight = $(this).attr("data-height");
		var getWidth = $(this).attr("data-width");
		$(this).css({"height":getHeight,"width":getWidth});
		$(this).find(".progress-bar").css({"background-color":"#"+getColor}).animate({ width:getPercent+'%' },getSpeed)
	});
});

Step 4) Finally HTML structure which we need to include.

<div class="progress-wrap progress" 
  data-progresspercent="25" 
  data-height="10px" 
  data-width="150px" 
  data-speed="1500" 
  data-color="3a9c23">
  <div class="progress-bar progress"></div>
</div>

In HTML we can add options as per requirements.

Complete final HTML will look something like this.

<html>

<head>
    <style>
    .progress {
        width: 100px;
        height: 100%;
    }

    .progress-wrap {
        background: #dcdcdc;
        margin: 20px 0;
        overflow: hidden;
        position: relative;
    }

    .progress-bar {
        background: #249c23;
        left: 0;
        position: absolute;
        top: 0;
        width: 0%;
    }
    </style>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script>
    $(document).ready(function() {
        var progressSelector = $(".progress-wrap");
        progressSelector.each(function() {
            var getPercent = $(this).attr("data-progresspercent");
            var getSpeed = parseInt($(this).attr("data-speed"));
            var getColor = $(this).attr("data-color");
            var getHeight = $(this).attr("data-height");
            var getWidth = $(this).attr("data-width");
            $(this).css({ "height": getHeight, "width": getWidth });
            $(this).find(".progress-bar").css({ "background-color": "#" + getColor }).animate({ width: getPercent + '%' }, getSpeed)
        });
    });
    </script>
</head>

<body>
    <div class="progress-wrap progress" data-progresspercent="25" data-height="10px" data-width="150px" data-speed="1500" data-color="3a9c23">
        <div class="progress-bar progress"></div>
    </div>
</body>

</html>

Category: jQuery