Skip to content

Instantly share code, notes, and snippets.

@nico3333fr
Created March 26, 2019 13:53
Show Gist options
  • Save nico3333fr/d8831a74ad59206940899e7bcb5c92bf to your computer and use it in GitHub Desktop.
Save nico3333fr/d8831a74ad59206940899e7bcb5c92bf to your computer and use it in GitHub Desktop.
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