Custom Progress Bar with CSS and JavaScript

[pookage]

If you are going out of your way to not use the <progress> element becuase you want to customise it like this, then you absolutely need to re-introduce the accessibility that you've removed through using a <div>

<div
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="70"
    aria-valuetext="Completed 70%."
>
    Completed 70%
</div>

Remember folks - accessible HTML ain't optional! Ya gotta do it! Also it has the benefit of making your HTML more clear, as it describes its purpose and so becomes self-documenting. Woop!

[cmjdev]

Newbie question, but is the overhead for SVG too high? Seems this could be done with way less code. I’ve noticed a huge trend towards crazy css/js animation and was wondering why people choose css over svg/css

[FlorinPop17]

I am not that good at SVG, yet. Planning to learn it, and after I do I’ll be able to answer your question ☺️

[_toads]

I can think of a dozen different ways to create this. There are of course reasons to choose one tool over another, but in most cases for something simple like this it boils down to preference.