HTML5 Progress Bar

Filed Under: HTML

The impressive growth of HTML5 has put forth a myriad of new interesting tools and elements through which we can revamp the overall look and functionality of a website. And one of them is HTML5 progress bar.

HTML5 Progress Bar

The introduction of ‘progress bar’ elements, allow developers to create a bar that shows the progress of a specific task such as downloading, uploading, file transferring, installation or anything that is in progress. HTML5 progress bar uses a motion or some other kind of indicator to display the total amount of work that has been done.

HTML5 progress bar

In this article, we are giving you some useful tips through which you can change the style of your html5 progress bar and make it look dynamic. But before we actually take you to the subject, let’s gain some basic idea about the progress bars.

The Basic of HTML5 Progress Bar

It’s very simple to use a progress bar, all you need is to just add <progress> tag in your document, and you’ll get an indeterminate progress bar, which can be either in the form of spinning wheel or a horizontal bar.

In this mode, the bar only shows cyclic movements and do not provide the exact progress indication. This mode is usually used at the time when the length of the time is not known.

HTML5 Progress Bar Example

The other attribute of progress bar, is to specify values of the progress – max and value. In the max attribute, you can specify the amount of work a specific task requires. And, in the value attribute, you can specify the amount of work that has been completed. Here, the browser automatically calculates the percentage of work that has been done and adjust the bar length accordingly.

Styling the HTML5 Progress Bar

First of all we will add Candy Stripe look to our html5 progress bar and then we will use jQuery for the animation effect.

  1. Giving Candy Stripe Look to The HTML Progress Bar

    It’s really easy to get the cool striped effect on your progress bar. All you need is to add some elements along with the layering recurring CSS3 gradient all over it. You can further go on integrating shadow, rounded borders, and padding to give it a dimensional effect.

    To get started, we need to set the progress value first. Here, we are setting the progress value around 0.4.

    
    <progress value="0.4"></progress>
    

    The CSS code for adding the candy stripe look into the candy bar is shown below.

    
    /* setting the dimensions */
    progress {
    width: 275px;
    height: 16px;
    display: block;
    /* disable defaults */
    -webkit-appearance: none;
    border: none;
    }
    /*Styling the background of the progress bar */
    progress::-webkit-progress-bar {
    background: white;
    border-radius: 45px;
    padding: 2px;
    box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
    }
    /* Setting the appearance of the meter */
    progress::-webkit-progress-value {
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); 
    background-size: 250px 25px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
    transparent 75%, rgba(255, 255, 255, .15) 75%, rgba(255, 255, 255, .15) 75%,
    transparent 75%, transparent); 
    

    This way, we have achieved a beautiful candy stripe effect on our progress bar. The colors of the candy stripes can be altered either by named colors or the rgba() function.

  2. Animating the HTML5 Progress Bar

    In this section, we will go through the steps of giving the animation effects to the progress bar. As we know that a progress bar move from left to right to show the amount of progress. The idea behind this, is that the progress bar starts from the point 0 and then displays the completion of the process, the moment it reaches to its maximum value.

    HTML5 Progress Bar animation

    Below we have provided an HTML structure to start the process. It looks like this:

    
    <progress id="progressbar"value="0"max="95"></progress>
    

    For CSS, we need to use jQuery to animate the progress bar. You need to insert jQuery like this:

    
    <script src="js/jquery.js" type="text/javascript"></script>
    
    //OR
    
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    

    Once you are done, in the next step you need to add scripts to create the expanding properties of the progress bar. First, you are required to store certain elements such as the value of the progress bar, the time frame, and the variables.

    
    var progressbar = $('#progressbar'), 
    max = progressbar.attr('max'), 
    value = progressbar.val(), 
    time = (300/max)*5; 
    

    Now, we need to create a variable to save animation functions. In the provided example, we have give the name ‘downloading’ to a variable.

    
    var downloading=function(){
    

    As you have seen that in the above example, we have already set the variable, it’s time set the progress interval inside it. At first, we increase the value by 0.5 per time frame. The value can be increased as per your choice to improve the speed of the progress.

    
    value+=0.5;
    

    Now, add this value to the progress bar. Like this:

    
    addValue=progressbar.val(value); 
    

    You’ll also need to show the value, located next to the progress bar.

    
    $('.progress-value').html(value+% assigned');
    

    Now, it’s time to run the animation function. The function will be added like this:

    
    setInterval(function(){
    loading();
    },time); 
    

    Here, we have created animation that is functioning. Here, the value will keep on increasing unless until we don’t specify any limit to stop it. For that we have loading() function like this:

    
    var loading = function() { 
    value += 0.5; 
    addValue = progressbar.val(value); 
    

    Now, proceed to animate the progress bar like this:

    
    $(document).ready(function() { 
    var progressbar = $('#progressbar'), 
    max = progressbar.attr('max'), 
    time = (300/max)*5, 
    value = progressbar.val(); 
    
    var loading = function() { 
    value += 0.5; 
    addValue = progressbar.val(value); 
    
    $('.progress-value').html(value + '%'); 
    
    if (value == max) { 
    clearInterval(animate); 
    } 
    }; 
    
    var animate = setInterval(function() { 
    loading(); 
    }, time); 
    }); 
    

    Congratulations! The styling of progress bar has been completed now. Below is the sample HTML file and image showing HTML5 progress bar animation output.

    
    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery HTML5 Progress Bar</title>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    
    <script type="text/javascript"> 
    $(document).ready(function() { 
    var progressbar = $('#progressbar'), 
    max = progressbar.attr('max'), 
    time = (300/max)*5, 
    value = progressbar.val(); 
    
    var loading = function() { 
    value += 0.5; 
    addValue = progressbar.val(value); 
    
    $('.progress-value').html(value + '%'); 
    
    if (value == max) { 
    clearInterval(animate); 
    } 
    }; 
    
    var animate = setInterval(function() { 
    loading(); 
    }, time); 
    }); 
    
    </script>
      
    <style> 
    /* setting the dimensions */
    progress {
    width: 400px;
    height: 24px;
    display: block;
    /* disable defaults */
    -webkit-appearance: none;
    border: none;
    }
    /*Styling the background of the progress bar */
    progress::-webkit-progress-bar {
    background: white;
    border-radius: 45px;
    padding: 2px;
    box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
    }
    /* Setting the appearance of the meter */
    progress::-webkit-progress-value {
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); 
    background-size: 250px 25px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
    transparent 75%, rgba(255, 255, 255, .15) 75%, rgba(255, 255, 255, .15) 75%,
    transparent 75%, transparent); 
    
    
    </style>
    </head>
    <body>
     
    
    
    Simple Progress Bar: <progress value="0.4"></progress>
    
    <br>
    
    Animated Progress Bar: <progress id="progressbar" value="0" max="95"></progress><div class="progress-value"></div>
     
    </body>
    </html>
    

    HTML5 jQuery Progress Bar Animation Example

    HTML5 Progress Bar jQuery Animation Demo

That’s all for implementing progress bar using HTML5 and adding cool effects and animations using CSS3 and jQuery.

About the Author: Samuel Dawson is an expert writer cum blogger. He is working for Designs2html Ltd. – a leading markup conversion service company. He has written many research articles on converting HTML to WordPress theme and shared online . He likes sharing insights about WordPress related services.

Comments

  1. rap says:

    how to call my html the loading bar is finished Help me plss

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages