JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<script src="https://raw.github.com/cvalleskey/circle/master/jquery.circle.min.js"></script>
<div class="wrap"><div id="loader">40%</div></div>

CSS

.wrap {
    width: 120px;
    height: 120px;
    margin: 50px auto;
    position: relative;
}
    
#loader {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    text-align: center;
    font: 14px/100px Helvetica Neue, sans-serif;
    color: #333;
}
canvas {
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -10px;
}

JavaScript

$(function() {
    $("#loader").circle();
    $("#loader").circle("update", {
        value: 0.9        
    });
});