JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="needle_contain">
<div class="scale_item">Well Out</div>
<div class="scale_item">Just Out</div>
<div class="scale_item">Just In</div>
<div class="scale_item">Well In</div>
</div>

<div class="needle_contain needle_bg">

<div class="needle_item">&#128556;</div>
<div class="needle_item">&#128528;</div>
<div class="needle_item">&#128515;</div>
<div class="needle_item">&#128526;</div>

<div class="needle"><div id="needle1" class="needle1"><span></span></div></div>

</div>

CSS

.needle_contain {display:flex;position:relative;}
.needle_bg {height:50px;background: rgb(189,22,22);margin-bottom:20px;
background: linear-gradient(90deg, rgba(189,22,22,1) 0%, rgba(255,209,0,1) 50%, rgba(37,168,46,1) 100%);}

.needle_item {width:25%;text-align:center;line-height:50px;font-size:20px;}
.scale_item {width:25%;background-color:#ffffff;text-align:center;box-sizing: border-box;border:solid #dedede;border-width:0 1px;font-size:14px;}

.needle {position:absolute;top:0;left:0;width:100%;}

.needle1 {width:25%;height:50px;position:relative;}

#needle1 span {display:block;position:absolute;right:-4px;top:-2px;width:2px;height:50px;border:2px solid #ffffff;border-radius:5px;}

JavaScript

setTimeout(function(){ 

var duration = 2;
var distance = 50;

var needle1 = document.getElementById('needle1');
needle1.style.transition = duration + 's';
needle1.style.width =  distance + '%';

}, 500);


setTimeout(function(){ 

var duration = 2;
var distance = 50;

var needle2 = document.getElementById('needle2');
needle2.style.transition = duration + 's';
needle2.style.width =  distance + '%';

}, 500);