JSFiddle - React, Tailwind, and code Playground

by Vadim Shaikhislamov

HTML

<div class="container">
  <div class="bar"></div>
  <div class="progressor line"></div>
</div>

CSS

.container {
  height: 40px;
  width: 100%;
  position: relative;
}

.bar {
  height: 32px;
  background-color: black;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 4px;
  z-index: 1;
}

.line {
  height: 40px;
  width: 60%;
  box-sizing: border-box;
  background-color: yellow;
  border: 4px solid blue;
  border-right: 0;
  position: absolute;
  z-index: 2;
}

.line:before {
	content: "";
  width: 20px;
	height: 40px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	background: blue;
  z-index:2;
  position: absolute;
  top: -4px;
  right: -8px;
}

.line:after {
	content: "";
  width: 20px;
	height: 32px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	background-color: yellow;
  z-index:3;
  position: absolute;
  right: -4px;
}

JavaScript

let percent = 60;
let line = document.querySelector(".progressor");
line.style.width = percent + '%';