js progressbar with css animation

example of progressbar interface with simple api and animation

by panamaprophet

HTML

<div class="progressbar" id="testProgress">
    <div class="progressbar__value" style="width: 0%; opacity: 0%"></div>
    <div class="progressbar__text-value">0%</div>
</div>

<br>

<button id="testButton">finish him!</button>

CSS

.progressbar__value {
    transition: opacity, width 420ms ease-in-out;
}

.progressbar {
    width: 300px; 
    background: #78909C;
    position: relative;
    display: inline-block;
    margin: 8px 0;
}

.progressbar__value {
    height: 100%;
    background: #263238;
    position: absolute;
    top: 0;
    left: 0;
}

.progressbar__text-value {
    padding: 4px 8px;
    line-height: 1.619;
    font-size: 1.2em;
    position: relative;
    color: #fff;
}

JavaScript

let ProgressBar = function(el){

	this.el = el
    
  this.valueEl = el.querySelector('.progressbar__value')
  this.textEl = el.querySelector('.progressbar__text-value')
}

ProgressBar.prototype = {
	
  update : function(value, text){
  
  		this.valueEl.style.width = value + '%'
      this.valueEl.style.opacity = value + '%'
     
      this.textEl.textContent = text || (value + '%')
  }
}

let el = document.getElementById('testProgress')
let button = document.getElementById('testButton')

let progressbar = new ProgressBar(el)

button.addEventListener('click', (event)=>{
	event.preventDefault()
  progressbar.update(100, '100% nice stuff')
})