JSFiddle - React, Tailwind, and code Playground

by Никита Егоров

HTML

<div class="wrapper">
    <div class="line"></div>
</div>

CSS

body {margin: 0; padding: 0;}

.wrapper {
  width: 100%;
  height: 60px;
  border: 2px solid #333;
}

.line {
  width: 0px;
  height: 100%;
  background-color: #aeea00;
}

JavaScript

class ProgressBar {
		constructor(wrapper, line) {
    		this.wrapper = wrapper;
        this.line		 = line;
    
    		wrapper.addEventListener('mousemove', this.listener.bind(this, [line]));
        wrapper.removeEventListener('mousemove', this.listener);
    }
    
    listener([line], event) {
    		line.style.width = event.clientX + 'px'
    }
} 

const wrapper = document.querySelector('.wrapper');
const line    = document.querySelector('.line');

const progressBar = new ProgressBar(wrapper, line)