JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<div id="circlesdiv1"></div>

CSS

div#circlesdiv1 {
    height: 30px;
    width: 200px;
    background-color: #3C3E46;
}
#circlesdiv1 .accuracycircle {
    background-color: #8A8A8A;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 5px;
}
div.accuracycircle1 {
    background-color: #DBFF94 !important;
}

JavaScript

// Repeat a string num times
String.prototype.repeat = function (num) {
    return new Array(num + 1).join(this);
};

var accuracy1 = 70; // Will be dynamic

var totalCircles = 5,
    noOfFilledCircles = Math.ceil(accuracy1 / 20);
noOfFilledCircles = noOfFilledCircles > 5 ? 5 : noOfFilledCircles;

var circleHtml = '<div class="accuracycircle"></div>';

$('#circlesdiv1').append(circleHtml.repeat(totalCircles)).find('div:lt(' + noOfFilledCircles + ')').addClass('accuracycircle1');