Cross-browser bar

Good time of day, Habro community!

Recently at work I got interesting problem, which I still sold. It was necessary to build a progress bar that would be completely universal, amenable to any of the styling and cross-browser plus (from IE7+)!

Here here is the end result. Complete article can be found here


As you know, our task was not only to do but also to make maximum use of the natural element <progress>. It is a plus that he is already almost ready-made solution + semantically correct in this situation. But what was my disappointment when I realized that this element, moreover, which is very bad stylized, and is not supported even in one of the latest browsers.

the

support in browsers?

To date, support in browsers is: Firefox 11, Opera 11.61, Chrome 17.
Such a meager balance I was obviously upset and are absolutely not satisfied with((. Honestly, I expected something more, assuming that and Safari 5.1 and Internet Explorer 9, everything will be just great.
the

What to do?

In General to begin, I decided to Snoop through the Internet and try to find some useful proprietary stuff for the browser. In the end, there were three things:
the

::-webkit-progress-bar

::-webkit-progress-value

::-moz-progress-bar

In short, this pseudo-elements, through which you can reach the element <progress> in Firefox and in Webkit-tion.

the

Intermediate test

Despite the fact that some browsers have support for element <progress>, its styling, even in places leaves much to be desired. For example, Opera doesn't want to succumb to styling and any wrong movement causes the bar to the unwanted color, and in Mozilla does not work the indicator. So, I decided to use the found properties and see what is in it for me.

the

<progress max="100" value="30">
Text
</progress>

the

progress {
margin: 2em auto;
display: block;
width: 100px;
border-radius : 8px;
background: #fff;
padding: 0;
border: 0;
text-align: center;
height: 20px;
box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);
overflow:hidden;
background: -o-linear-gradient(#4c4, #8f8 50%, #4c4);

}

progress::-moz-progress-bar {
background: -moz-linear-gradient(#4c4, #8f8 50%, #4c4);
border-radius: 8px;
}
progress::-webkit-progress-bar {
background: #fff;
box-shadow: 1px 2px rgba(0,0,0,.3) inset, 0 0 0 1px rgba(0,0,0,.5);

}
progress::-webkit-progress-value {
background: -webkit-linear-gradient(#4c4, #8f8 50%, #4c4);
border-radius: 8px;
}

And here's what happened:


In Firefox and Chrome, we were able to subdue the progress bar completely, including the frame and the indicator itself. It happened thanks to the proprietary svoistvam (without them, somehow the picture was the same as in Opera) But, unfortunately, in Safari this number is not passed and even the background has disappeared completely. In Opera the color was different after I applied the styles to the element <progress>, and about IE, I generally keep quiet.

Of course, I was going to use the script, but I wanted to reduce its primary use at least a number of browsers.

We can say about two things. The main script is not needed for Firefox and Chrome, but love is necessary for IE6-9 and Safari. But with Opera I decided not to bother and leave it the color of the indicator on the conscience of the developers of this browser.

the

Task

Before writing a script, we need to summarize our problem and determined that we all want to.
the

the
• to involve the element <progress> where possible. Semantics plays a key role (if it does not harm quality) and therefore use the semantic elements is very important for us.
the
• the Progress bar should contain a specific text that will display the current percentage of the progress bar.
the
• the Progress bar needs to be easily customizable and evolving. Depending on the class it needs to change the width, height, color, etc.

Based on the task, I concluded that in our case would be a generic container, which would be the element <progress> and the second element to text.

the

<div class="psyProgressBar">
<progress max="80" value="0" class="psyProgressBar__line"></progress>
<i class="psyProgressBar__text">0%</i>
</div>

Further, it should be a journey for the script, but I decided to leave this part for those who want read article fully.

The only thing I will say that the point is that for "normal" browsers I've applied the script only to fill the indicator, and for all other browsers made the switch element <progress> element <div> with special. class, through which you can style our progress bar as we please.

So here I lay ready-made solution and those who are already familiar my style and wants to read the whole story, welcome to the article. Don't forget about the cookies! :)

Article based on information from habrahabr.ru