JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<!-- <div id="progress_bar" style="height:1em; width:1%; background:red;"></div> -->

<div class="quiz-progress"><span class="progress-bar"></span></div>

SCSS

//progress bar
.quiz-progress {
    width: 100%;
    background-color: grey;
    height: 10px;
    
    position: relative;
    bottom: 0;
    left: 0;
    
    .progress-bar {
        width: 1%;
        height: 10px;
        background-color: blue;  
        
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

JavaScript

$(document).ready(function() {
var width=(1/4*100);
$('.progress-bar').css('width', width + "%");
});