JSFiddle - React, Tailwind, and code Playground

by manolenso

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
    <img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
    <div id="bar"></div>
</div>

CSS

svg {
    width: 100%;
    display: block;
}

.wrapper {
    position: relative;
    width: 200px;
    height: 200px;
}

.wrapper > #bar, .wrapper > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrapper > img {
    /* Needs appropriate vendor prefixes */
    box-sizing: border-box;
    
    /* This needs to be equal to strokeWidth */
    padding: 4%;
}

.wrapper > img {
    border-radius: 50%;
}

JavaScript

var circle = new ProgressBar.Circle('#bar', {
    strokeWidth: 8,  // This means 4% of the container
    color: 'teal'
    
});
circle.animate(1);