Progress bar html CSS пример

Последнее обновление на 16.12.2022

Progress bar html CSS пример
html код:

<div class="main-indicator">
    <p class="indicator">Загрузка...</p>   
    <progress id="progress-anim" value="0" max="100">Загрузка...</progress>	
     <button class="button1 button-new" id="button-download">Загрузить</button>
     </div>

CSS код:

.main-indicator{
    display: block;
    width: 400px;
    height: 100px;
    text-align: center;
}
::-webkit-progress-bar {
    background: rgb(172, 172, 166);
    border-radius: 8px;
}
::-webkit-progress-value {
    background: orange;
}
::-moz-progress-bar {
    background: orange;
}
progress {
    display: block;
    color: orange;
    background: rgb(172, 172, 166); 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 400px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid orange;
}
.button1 {
  border: none;
  color: white;
  font-size: 16px;
  margin: 10px 1px;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button-new {
  background-color: white; 
  color: black;
  border-radius: 12px;
  border: 3px solid orange;
}
 
.button-new:hover {
  background-color: orange;
  color: white;
}

JavaScript:

let progress = document.getElementById('progress-anim')
let button_download = document.getElementById('button-download')
let timer
    
// поддержка старых браузеров
/*
if ( ! progress.value )
    progress.value = +progress.getAttribute("value");
if ( ! progress.max )
    progress.max = +progress.getAttribute("max");
*/
function counterProgress() {

    if ( progress.value >= progress.max ) {
        return
    }
    
    progress.value++
    
   /* clearTimeout( timer )*/
   /* timer = setTimeout( counterProgress, 20 ) */
   setTimeout( counterProgress, 20 ) 
}
/*counterProgress()*/
button_download.addEventListener( 'click', function(){
	progress.value = 0
    counterProgress()
  return false
} )

Демонстрация progress bar: