If you don't want to style a progress bar from scratch, you can immediately start using the HTML element progress.
Progress bars can be used for heaps of reasons, the native progress tag element creates a pre-defined one that has the style that matches the browser or OS you are currently using.
You can also style the progress bar using CSS if you want something custom. There are different styling requirements for each browser, unfortunately, but they are mostly easy to use.
HTML
<progress max="100" value="1" ></progress>
CSS
progress {
-webkit-appearance:none;
width:66%;
height:20px;
border:1px solid #ccc;
overflow:hidden;
color:#aaa;
border-radius:15px;
&::-webkit-progress-bar {
background:#f1f1f1;
}
&::-webkit-progress-value {
background:#aaa;
}
&::-moz-progress-bar {
background:#aaa;
}
}
JavaScript
setInterval(function() {
document.getElementsByTagName('progress')[0].value = document.getElementsByTagName('progress')[0].value + 1
if(document.getElementsByTagName('progress')[0].value === 100){
document.getElementsByTagName('progress')[0].value = 0
}
}, 25)
Follow and support me:
Special thanks if you subscribe to my channel :)
Want to see more:
I will try to post new great content every day. Here are the latest items:
Top comments (0)