DEV Community

Discussion on: Animated Circular progress bar using Html and CSS

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

If you don't mind loading a native JavaScript Web Component,

you can use this HTML:

<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<progress-circle edge="grey">
    <progress value="75%" stroke="green">SEO</progress>
    <progress value="60%" stroke="orange">Social</progress>
    <progress value="65%" stroke="teal" edge="black">Maps</progress>
    <progress value="50%" stroke="orangered">Traffic</progress>
  </progress-circle>
Enter fullscreen mode Exit fullscreen mode

to create:

You have to add the SVG animation yourself,
unlicensed Web Component source code at: pie-meister.github.io/