styling progress bar

[funbinod]

i was trying to style my progress bar with css. it worked fine with only IE but not with other browsers - chrome, firefox, opera.

 

the following is what i tried

progress {	width:100%;	color:#F00;	background-color:#EFD259;	height:30px;	border-radius:10px;	border:2px solid #FFF;}progress::-webkit-progress-bar {	width:100%;	color:#F00;	background-color:#EFD259;	height:30px;	border-radius:10px;	border:2px solid #FFF;}progress::-webkit-progress-value {	width:100%;	color:#F00;	background-color:#EFD259;	height:30px;	border-radius:10px;	border:2px solid #FFF;}

https://jsfiddle.net/kza8ykxx/

 

please guide me to the perfect progress bar styling..

 

thanks in advance...

[Ingolme]

When testing this in Firefox it works for me:

progress::-moz-progress-bar {    width:100%;    color:#F00;    background-color:#EFD259;    height:30px;    border-radius:10px;    border:2px solid #FFF;}

[Ingolme]

There's a note on the W3Schools progress bar page:

http://www.w3schools.com/tags/tag_progress.asp

 

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.

 

It's just something to take into account. It's up to you to determine whether the <progress> or <meter> element better represents your data.

[funbinod]

 

When testing this in Firefox it works for me:

progress::-moz-progress-bar {    width:100%;    color:#F00;    background-color:#EFD259;    height:30px;    border-radius:10px;    border:2px solid #FFF;}

but its not working for me in firefox either..

 

i'm using firefox 41.0.2

 

EDIT:

it styles the progress bar but doesn't display the progress...

Edited November 2, 2015 by funbinod

[funbinod]

There's a note on the W3Schools progress bar page:

http://www.w3schools.com/tags/tag_progress.asp

 

It's just something to take into account. It's up to you to determine whether the <progress> or <meter> element better represents your data.

 

i don't need the <meter>. i'm trying to display a progress bar until something (or page) is loaded..

[Ingolme]

This works for me.

Be sure to add a value attribute and a max attribute.

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

progress {    background-color:#EFD259;}progress::-moz-progress-bar {    background-color:#F00;}progress::-webkit-progress-bar {    background-color:#F00;}

[funbinod]

 

This works for me.

Be sure to add a value attribute and a max attribute.

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

progress {    background-color:#EFD259;}progress::-moz-progress-bar {    background-color:#F00;}progress::-webkit-progress-bar {    background-color:#F00;}

 

and the color of the value???

color:#FF0;

[Ingolme]

I don't see the value written in text format when I test in Firefox. To change the color of the bar, change the background-color of the ::-moz-progress-bar and ::-webkit-progress-bar pseudo-elements.

[funbinod]

I don't see the value written in text format when I test in Firefox. To change the color of the bar, change the background-color of the ::-moz-progress-bar and ::-webkit-progress-bar pseudo-elements.

 

sorry! i think i couldn't make u understand clearly.

 

i meant that the <background-color> defines the color of the progress bar. but there is no any progressing (or running) dots (like they appear on IE inside the progress bar..

[Ingolme]

Each browser renders the progress bar in its own way, that feature doesn't seem to exist in Firefox. If you were looking for something you had more control over you could use <div> tags with custom styling the way Bootstrap does it.

[funbinod]

Each browser renders the progress bar in its own way, that feature doesn't seem to exist in Firefox. If you were looking for something you had more control over you could use <div> tags with custom styling the way Bootstrap does it.

 

but the default <progress> bar on firefox and chrome is animated. only after stylling there is no any animation.

[Ingolme]

Yes, that's correct, because it appears that by default Firefox is using a windows UI element provided by the operating system. If you attempt to change the appearance it will need to replace that UI element with something else so that it is able to modify it.