Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Styles for progressbar in HTML5 (IE11+)
/*
* Progress bar
*/
.progressBar-container {
padding: 1rem 2rem;
}
.progressBar {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox. */
border: none;
height: 6px;
border-radius: 3px;
background-color: $black;
color: $pm-blue;
width: 100%;
}
.progressBar::-webkit-progress-bar {
background-color: $black;
border-radius: 3px;
}
.progressBar::-moz-progress-bar {
background-color: $pm-blue;
border-radius: 3px;
}
// dont factorize with above, otherwise it will fail on Chrome
::-webkit-progress-value {
background-color: $pm-blue;
border-radius: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.