JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
</head>
<h1>Pure CSS progress bar</h1>
<div class="outer">
    <div class="inner">
       
        <p><span>3/4</span></p>
    </div>
    <p>3/4</p>
</div>
</html>

CSS

/* Hello! This CSS is for a progress bar! The HTML that goes with it is:

<html>
    <div class="outer">
        <div class="inner">
                      <p><span>3/4</span></p>
        </div>
        <p>3/4</p>
    </div>
</html>

If you do not want the quarter markers just remove the ul.

If you remove the spans you will have to change the css for the .inner p to be 7 less than the width of the progress bar so that
    the fractions line up!

To add different segments ie. 10th markers, add 10 <li></li> and change the width of the li's to about 9%

Thanks for looking!

greg mathews (http://gregdmathews.com)

*/

h1{
    color: #3f3f3f;
    font-size: 24px;
    font-weight: bold;
    margin-top: 90px;
}
.outer{
    margin-left: 30px !important;
    margin-top: 16px !important;
}

@-webkit-keyframes show {
   from { width: 15%; }
   to   { width: 92%; }
}
html{
    font-family: "helvetica neue", helvetica, sans-serif;
    margin: 10px;
    margin-left: 70px;
}
li{
    border-right: 1px solid #0c8290;
    border-left: 1px solid #7af0fe;
    width: 24%;   
}
li:first-child{
    border-left: none;
}
li:last-child{
    border-right: none;
}
/* Adjust this to adjust the height of the progress bar */
li, ul, .inner, .outer{
    height: 30px;
}
li, .inner{
    float: left;
}
p span{
    margin-right: 7px;
}
ul{
    overflow: hidden;
}
ul, .inner, .outer{
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
}
/* Adjust this to adjust the width of the progress bar */
ul, .inner p, .outer{
    width: 200px;
}
ul, .inner p, .outer > p{
    position: absolute;
}
.inner{
    -webkit-animation-name: show;
    -webkit-animation-duration: 1s;
    background: rgb(41,206,225); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(41,206,225,1) 0%, rgba(41,206,225,1) 50%, rgba(17,200,222,1) 51%, rgba(17,200,222,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom,...