JSFiddle - React, Tailwind, and code Playground

by rudygotya

HTML

<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>

CSS

.spinner{
    background: red;
    width: 0;
    height: 20px;
    margin-bottom: 5px;
}

JavaScript

function LoadingSpinner( element, options ) {
	
	this.element = element;
	
	this.options = options || {};
	
	this.value = 0;
	
}

LoadingSpinner.prototype = {
	
	disabled : false,
	
	intervalId : 0,
	
	start : function() {
	
		this.intervalId = setInterval( this.update.bind( this ), this.options.delay || 20 )
	
	},
	update : function() {
	
		if( this.disabled ) {
			if( this.intervalId ) {
				clearInterval( this.intervalId );
			}
			return;
		}
		
		this.value += 1;
		if( this.value > 100 ) {
			this.value = 1;
		}
		
		this.element.style.width = '' + this.value + '%'
	
	}
}


var elements = document.querySelectorAll( '.spinner' ),
	spinners = [];

elements = ([]).slice.call( elements );

elements.forEach(function( el, i ) {
	var spinner = new LoadingSpinner( el );

	spinner.start();
	spinners.push( spinner );
	
})