Skip to content

Instantly share code, notes, and snippets.

@pa-ulander

pa-ulander/index.html

Created June 14, 2016 14:35
Show Gist options
  • Save pa-ulander/b6150e25dd7e6d30cf910b477716cdc9 to your computer and use it in GitHub Desktop.
Save pa-ulander/b6150e25dd7e6d30cf910b477716cdc9 to your computer and use it in GitHub Desktop.
Download ZIP
html5 progressbar css test
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<style>
progress {
background-color: #f3f3f3;
border: 0;
width: 50%;
height: 8px;
border-radius: 5px;
}
progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 5px;
}
progress::-webkit-progress-value {
background: #c1c1c1;
background: -moz-linear-gradient(top, #c1c1c1 0%, #d1d1d1 100%);
background: -webkit-linear-gradient(top, #c1c1c1 0%,#d1d1d1 100%);
background: linear-gradient(to bottom, #c1c1c1 0%,#d1d1d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#d1d1d1',GradientType=0 );
border-radius: 5px;
}
</style>
<progress id='pb' max='1000'></progress>
<script type="text/javascript">
var pBar = document.getElementById('pb');
setInterval(function() {
updateProgress(1);
}, 10);
var updateProgress = function(value) {
pBar.value += value;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment