Progress Bar

Pure CSS, HTML5

by hiddenloop

HTML

<progress class="progress-bar" id="progress-bar" value="0" max="100"></progress>

CSS

.progress-bar {
  background-color: rgba(226, 221, 215, 0.4);
  border: 0;
  height: 18px;
  border-radius: 9px; 
  width: 300px;
  margin: 0 auto;
  color: rgba(226, 221, 215, 0.4);
  -webkit-appearance: none;
}

.progress-bar::-webkit-progress-bar {
  background-color: rgba(226, 221, 215, 0.4);
  border-radius: 9px;
}

.progress-bar::-webkit-progress-value {
  background: linear-gradient(135deg, rgba(0, 116, 228, 0.15) 0%, rgba(85, 34, 250, 0.15) 100%);
  border-radius: 9px; 
  transition: width 1.0s ease-in-out;
}

.progress-bar::-moz-progress-bar {
  background: linear-gradient(135deg, rgba(0, 116, 228, 0.15) 0%, rgba(85, 34, 250, 0.15) 100%);;
  border-radius: 9px;
}

JavaScript

setTimeout(function() {
  document.getElementById('progress-bar').value = 23;
  setTimeout(function() {
    document.getElementById('progress-bar').value = 67;
    setTimeout(function() {
      document.getElementById('progress-bar').value = 100;
    }, 1200)
  }, 1000)
}, 350)