Innovative idea for a progress bar

Now, let's take a break from web development and all that nerdy stuff and talk about web design. In particular, a brilliantly new idea for progress bar. In this post, we'll build a progress bar that has an arrow on top showing the position of progress in the progress bar. The progress bar itself will have a gradient background from light to dark indicating the progress.

What we're trying to achieve

Here's what we're trying to build.

The progress bar we're trying to build

How do we get to it?

Let's look at the HTML we need to build this progress bar.

<div class="arrow"></div>
<div class="progressbar"></div>

Pretty straightforward right? Just two div elements, one for the triangle shaped arrow on top and one progress bar. Let's style them so that they look like a progress bar. Here's some CSS with comments explaining the code.

/* This code might be difficult to understand*/
/* I'll go over creating arrows in a later blog post */
.arrow{
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; 	
    border-bottom: 15px solid red;
}

.progressbar{
    /* We first set the background to be a gradient */
    background: -webkit-linear-gradient(left, #FF0000  , #800000 );
    background: -o-linear-gradient(right, #FF0000 , #800000 );
    background: -moz-linear-gradient(right, #FF0000 , #800000 );
    background: linear-gradient(to right, #FF0000  , #800000 );
    width:100%; /* The width */
    height:50px; /* The height */
}

This gives us a progress bar exactly the way we wanted.

Changing the progress level

As we progress in our process, we might want to change the arrow's position to a different level. How do we do that. Well, the answer's simple, we simply add a margin-left attribute to the arrow div element where the margin value (in percentage) determines the position of the arrow.

So, if we set margin-left to 10% the arrow will be displayed at 10% width from the left.  By default the progress bar shows 0% progress.

Our progress bar at different levels of progress

Further work

Though you can safely use this kind of a progress bar for your app right away, there are a few things I would like to work on that are worth mentioning. 

First, when you set margin-left to 100% to indicate that the progress is 100% the arrow somehow moves out of the progress bar. We'll have to add some sort of check with JavaScript or CSS' calc function with that. 

Second, the triangle looks okay when the progress is less but as the progress increases the colour of the triangle no longer merges with the progress bar. We could add some JavaScript check to change the colour as we're changing the progress to counter this. Or we could simply have the arrow of some other colour like black that is not in the progress bar.

Please feel free to comment on this post to let me know if your progress with my progress bar and about the improvements that you've made on it.