JSFiddle - React, Tailwind, and code Playground

progress-radial

by Jennifer Perrin

HTML

<section id="progress">
    <div class="bs-example">
        <div class="progress-radial progress-10">
            <div class="overlay">10%</div>
        </div>
        <div class="progress-radial progress-primary progress-20">
            <div class="overlay">20%</div>
        </div>
        <div class="progress-radial progress-darkblue progress-30">
            <div class="overlay">30%</div>
        </div>
        <div class="progress-radial progress-success progress-40">
            <div class="overlay">40%</div>
        </div>
        <div class="progress-radial progress-warning progress-50">
            <div class="overlay">50%</div>
        </div>
        <div class="progress-radial progress-pink progress-60">
            <div class="overlay">60%</div>
        </div>
        <div class="progress-radial progress-danger progress-70">
            <div class="overlay">70%</div>
        </div>
        <div class="progress-radial progress-purple progress-80">
            <div class="overlay">80%</div>
        </div>
        <div class="progress-radial progress-inverse progress-90">
            <div class="overlay">90%</div>
        </div>
        <div class="clearfix"></div>
    </div>
</section>

CSS

.progress-radial {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
}
.progress-radial {
    background-color: #888888;
    border: 1px solid #888888;
    border-radius: 50% 50% 50% 50%;
    height: 100px;
    position: relative;
    width: 100px;
}
.progress-radial .overlay {
    background-color: #F4F4F4;
    border: 1px solid #888888;
    border-radius: 50% 50% 50% 50%;
    color: #000000;
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-top: 20px;
    position: absolute;
    text-align: center;
    width: 60px;
}
.progress-0 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(90deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-5 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(108deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-10 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(126deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-15 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(144deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-20 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(162deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-25 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(180deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-30 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(198deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-35 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent 50%, transparent), linear-gradient(216deg, #888888 50%, #F4F4F4 50%, #F4F4F4);
}
.progress-40 {
    background-image: linear-gradient(90deg, #F4F4F4 50%, transparent...