CSSjQuery

Animated progress bar 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!

[amazon template=findsourcecode&asin=1118531647][amazon template=findsourcecode&asin=1493692615]

Leave a Reply

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

sixteen − nine =

This site uses Akismet to reduce spam. Learn how your comment data is processed.