JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div class="progress_wrapper clearfix">
    <div class="progress_layer">
        <div class="progress_line"></div>
    </div>
    <div class="progress_percent">0%</div>
</div>

CSS

body {
    font-family: arial;
    background: #000;
}

.progress_wrapper {
    border: 1px solid #ffff00;
    position: relative;
    width: 400px;
    height: 40px;
    background: transparent;
}
.progress_layer {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 85px;
    float: left;
}

.progress_percent {
    background: #ffff00;
    width: 65px;
    height: 40px;
    float: right;
    line-height: 40px;
    text-align: center;
    position: relative;
    font-size: 13px;
}

.progress_percent:after {
    display: block;
    content: '';
    border: 10px solid transparent;
    border-right-color: #ffff00;
    position: absolute;
    left: -20px;
    top: 10px;
}

.progress_line {
    background: #ffff00;
    position: absolute;
    top:0; bottom: 0; left: 0;
    width: 0%;
    
    -webkit-transition: all 225ms ease;
	-moz-transition: 	all 225ms ease;
	-ms-transition: 	all 225ms ease;
	-o-transition: 		all 225ms ease;
	transition: 		all 225ms ease;
}

.progress_line:after {
    display: block;
    content: '';
    border: 10px solid transparent;
    border-left-color: #ffff00;
    position: absolute;
    right: -20px;
    top: 10px;
}


.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

JavaScript

var line = document.querySelector('.progress_line'); 
var percent = document.querySelector('.progress_percent');



var current = 0;

var i = setInterval(function() {
	if(current < 100) {
    	current += 10;
        percent.innerHTML = current+'%';
        line.style.width = current+'%';
    } else {
    	current = 0;
        clearInterval(i);
    }
    
}, 100);