Animated progress bar in CSS, jQuery

Posted on Posted in CSS, jQuery

In this tutorial I am going to show you how to create an animated progress bar in CSS, jQuery. Before going to the details of our source code let’s have a look on the live demo of our animated progress bar.

Now I am going to show you how you can create a similar animated progress bar for your game or web page.

We have used jQuery in our code so at first you have to add the jQuery script on the head portion of your HTML webpage. Add the following code in the head section of your HTML webpage.

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

Next, add the following HTML code in the body section of your webpage.

<div id="fuel" class="progressbar">
    <div class="fuel-value" style="width:0%;"></div>
    <div id="fuel-value-html"></div>
    <input type="submit" id="submit" value="Click Me"/>
    <input type="submit" id="refresh" value="Refresh"/>
</div>

Now, add the following CSS code in the head section of your HTML webpage. You can create a separate CSS file and add the following code there. In that case, don’t forget to omit the style tag at the beginning and end. Besides, Do not forget to add the .css file in the head section of your webpage.

<style type="text/css">
.progressbar {
    position: absolute;
    top: 5%;
    left: 50%;

    width: 300px;
    height:12px;
    margin-left : -150px;
    border: 1px solid #000;

    transition-property:width;
    transition-duration:1s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8C906F), color-stop(48%,#8C906F), color-stop(51%,#323721), color-stop(54%,#55624F), color-stop(100%,#55624F)); /* webkit */
    background: gradient(linear, left top, left bottom, color-stop(0%,#8C906F), color-stop(48%,#8C906F), color-stop(51%,#323721), color-stop(54%,#55624F), color-stop(100%,#55624F)); 
}

.progressbar .fuel-value {
    height:12px;
    transition-property:width;
    transition-duration:1s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8D751), color-stop(48%,#A8D751), color-stop(51%,#275606), color-stop(54%,#4A8A49), color-stop(100%,#4A8A49)); /* webkit */
    background: gradient(linear, left top, left bottom, color-stop(0%,#A8D751), color-stop(48%,#A8D751), color-stop(51%,#275606), color-stop(54%,#4A8A49), color-stop(100%,#4A8A49));
}
</style>

Finally, create a separate .js file and add the following code there. Make sure to add that script in the head section of your HTML webpage.

var fuel = 0;
var fuelMax = 10;

$("#fuel-value-html").html(Math.round(fuel / fuelMax * 100) + '%');

$("#submit").click(function(){
    if (fuel < fuelMax) {
        fuel++;
        $(".fuel-value").width(fuel / fuelMax * 100 + '%');
        $("#fuel-value-html").html(Math.round(fuel / fuelMax * 100) + '%');
    }   
});

$("#refresh").click(function(){
    fuel = 0;
    $(".fuel-value").width(fuel / fuelMax * 100 + '%');
    $("#fuel-value-html").html(Math.round(fuel / fuelMax * 100) + '%');   
});

Once, you are done with all the steps you will be able to see an animated progress bar in your webpage or game.

If you have any questions feel free to ask me!

JavaScript and JQuery: Interactive Front-End Web Development
A Software Engineer Learns HTML5, JavaScript and jQuery

About MD Mosleh Uddin

Trying to create an interesting and comfortable environment for the beginners of different programming languages and web design.

Leave a Reply

Your email address will not be published. Required fields are marked *

one × 2 =