HOW TO USE THE PROGRESS ELEMENT

When creating a web site we sometimes need to provide the user with feedback on the progress of a particular task , whether that be uploading a file, saving a document or even showing them how much is left until they complete filling in a form.

Until now, there has never been a specific HTML element that served this purpose, but now we have the progress element that, as the name suggests, was made to represent the progress of these tasks.

USING THE PROGRESS ELEMENT

When it comes to using this element we have two attributes that help us make the most of the progress element in any situation:

• Max: this attribute represents the maximum value in our progress bar and by default it’s set to a value of 1.
• Value: this attribute represents the current progress in the task. It must be between zero and the max value.

So if we want a progress bar with a maximum value of 100% and with a starting value of 50% we would use something like:

<progress max="100" value="50"></progress>

STYLING THE PROGRESS ELEMENT

The problem when it comes to styling the progress element is that each category of browser handles things differently and that complicates things.

Every one of the browser categories provides different pseudo classes to change the styles of the progress bar. Taking this in consideration let’s dive in.

The HTML we’re used is:

<span>70%</span><progress max="100" value="70"></progress>

STYLING IN WEBKIT

To style the progress bar as a whole we can always use the progress tag in our css:

progress {
-webkit-appearance: none;
appearance: none;
width: 300px;
height: 60px;
position: relative;
}

What I did in here was set the appearance to none to reset all styles so that we can start with a blank canvas.

Now the pseudo classes begin, in order to style the background of the progress bar in webkit browsers we need to use the ::-webkit-progress-bar pseudo class like so:

progress::-webkit-progress-bar {
background-color: #17181F;
border-radius: 10px;
background-color: #17181F;
border: 5px solid #17181F;
box-shadow: inset 1px 0px 2px rgba(0,0,0,0.5);
}

All I placed in here was pretty straight forward CSS , I set a background color, rounded the corners , added a border and also a box shadow. Now it’s time to style the bar or as webkit calls it “the value”, to style this part we must use the ::-webkit-progress-value pseudo class:

progress::-webkit-progress-value {
background: #d3e2dc;
background: linear-gradient(to bottom, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
background: -webkit-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -o-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -ms-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
border-radius: 10px;
}

When it comes to the bar I added a subtle gradient and then a border radius to continue with the rounded look.

That’s it for the pseudo classes, all that’s left to do is place the span where we want it:

span {
font-weight: bold;
font-family: tahoma, arial;
font-size: 20px;
color: #7B8885;
display: block;
position: relative;
z-index:2;
top: 38px;
left: 20px;
}

As you can see, in the span all that’s been done is placing it on top of our value so that it doesn’t look misplaced. This style will be the same in every browser.

STYLING IN FIREFOX

In Webkit we had two pseudo classes , one controlled the background of the progress bar and the other one the value, unfortunately in Firefox we only have the ::-moz-progress-bar pseudo class and this one is equivalent to the ::-webkit-progress-value so in the case of Firefox we must tweak the progress tag a little more in order to achieve the same result:

progress{
-webkit-appearance: none;
appearance: none;
width: 300px;
height: 60px;
position: relative;
border-radius: 10px;
background-color: #17181F;
border: 5px solid #17181F;
box-shadow: inset 1px 0px 2px rgba(0,0,0,0.5);
}

As you can see the styling applied to the progress tag in Firefox needs to be a combination of the progress styles and the ::-webkit-progress-bar.

When it comes to the value, in Firefox’s case we need the ::-moz-progress-bar pseudo-class with the styling as before:

progress::-moz-progress-bar {
background: #d3e2dc;
background: linear-gradient(to bottom, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
background: -webkit-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -o-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -ms-linear-gradient(top, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
border-radius: 10px;
}

The span element receives the same styles as it did in Webkit.

When it comes to Internet Explorer only IE10 supports this feature and only partially, the only thing we can actually change is the value’s color and for IE to recognize it we need to address it as color instead of background color.

Styling this element is possible even though it may be quite challenging because of all the browser differences.