funbinod Posted November 1, 2015 Share Posted November 1, 2015 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... Link to comment Share on other sites More sharing options...
Ingolme Posted November 1, 2015 Share Posted November 1, 2015 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;} Link to comment Share on other sites More sharing options...
Ingolme Posted November 1, 2015 Share Posted November 1, 2015 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. Link to comment Share on other sites More sharing options...
funbinod Posted November 2, 2015 Author Share Posted November 2, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
funbinod Posted November 2, 2015 Author Share Posted November 2, 2015 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.. Link to comment Share on other sites More sharing options...
Ingolme Posted November 3, 2015 Share Posted November 3, 2015 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;} Link to comment Share on other sites More sharing options...
funbinod Posted November 6, 2015 Author Share Posted November 6, 2015 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; Link to comment Share on other sites More sharing options...
Ingolme Posted November 6, 2015 Share Posted November 6, 2015 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. Link to comment Share on other sites More sharing options...
funbinod Posted November 6, 2015 Author Share Posted November 6, 2015 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.. Link to comment Share on other sites More sharing options...
Ingolme Posted November 7, 2015 Share Posted November 7, 2015 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. Link to comment Share on other sites More sharing options...
funbinod Posted November 7, 2015 Author Share Posted November 7, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted November 7, 2015 Share Posted November 7, 2015 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now