<Progress /> HTML Element 🚥

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: