JSFiddle - React, Tailwind, and code Playground

by Lien Z

HTML

<div class="wrap">
    <div class="progress-radial progress-25">
        <div class="overlay">25%</div>
    </div>
    <div class="progress-radial progress-50">
        <div class="overlay">50%</div>
    </div>
    <div class="progress-radial progress-75">
        <div class="overlay">75%</div>
    </div>
    <div class="progress-radial progress-90">
        <div class="overlay">90%</div>
    </div>
</div>

CSS

body {

    padding: 30px 0;

    background-color: #2f3439;

}

.wrap {

    width: 600px;
    margin: 0 auto;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */

.progress-radial {

    float: left;

    margin-right: 30px;

    position: relative;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    border: 2px solid #2f3439;

    background-color: tomato;

}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */

.progress-radial .overlay {

    position: absolute;

    width: 60px;

    height: 60px;

    background-color: #fffde8;

    border-radius: 50%;

    margin-left: 20px;

    margin-top: 20px;

    text-align: center;

    line-height: 60px;

    font-size: 16px;

}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

.progress-0 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);

}

.progress-5 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);

}

.progress-10 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);

}

.progress-15 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);

}

.progress-20 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);

}

.progress-25 {

    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439...