Анимированные индикаторы прогресса на CSS - пример html js css

• HTML код


• CSS код
• Результат кода

<progress value="0" max="100" style="--value: 0; --max: 100;"></progress>

<progress value="25" max="100" style="--value: 25; --max: 100;"></progress>

<progress value="50" max="100" style="--value: 50; --max: 100;"></progress>

<progress value="75" max="100" style="--value: 75; --max: 100;"></progress>

<progress value="100" max="100" style="--value: 100; --max: 100;"></progress>

@property --progress-value {

  syntax: "";

  inherits: true;

  initial-value: 0;

}

:root {

  --progress-bar-color: #cfd8dc;

  --progress-value-color: #2196f3;

  --progress-empty-color-h: 4.1;

  --progress-empty-color-s: 89.6;

  --progress-empty-color-l: 58.4;

  --progress-filled-color-h: 122.4;

  --progress-filled-color-s: 39.4;

  --progress-filled-color-l: 49.2;

}



html, body {

  height: 100%;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



body {

  justify-content: space-evenly;

  max-height: 300px;

  width: 100%;

  max-width: 400px;

  font-family: "Roboto Mono", monospace;

}



progress[value] {

  display: block;

  position: relative;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  width: 80%;

  height: 6px;

  border: 0;

  --border-radius: 10px;

  border-radius: var(--border-radius);

  counter-reset: progress var(--progress-value);

  --progress-value-string: counter(progress) "%";

  --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));

  --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));

  --progress-value-percent: calc(var(--progress-value-decimal) * 100%);

  --progress-value-color: hsl(

    calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg)

    calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%)

    calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%)

  );

  -webkit-animation: calc(3s * var(--progress-max-decimal)) linear 0.5s 1 normal both progress;

          animation: calc(3s * var(--progress-max-decimal)) linear 0.5s 1 normal both progress;

}

@supports selector(::-moz-progress-bar) {

  progress[value] {

    --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));

  }

}



progress[value]::-webkit-progress-bar {

  background-color: var(--progress-bar-color);

  border-radius: var(--border-radius);

  overflow: hidden;

}



progress[value]::-webkit-progress-value {

  width: var(--progress-value-percent) !important;

  background-color: var(--progress-value-color);

  border-radius: var(--border-radius);

}



progress[value]::-moz-progress-bar {

  width: var(--progress-value-percent) !important;

  background-color: var(--progress-value-color);

  border-radius: var(--border-radius);

}



progress[value]::after {

  display: flex;

  align-items: center;

  justify-content: center;

  --size: 32px;

  width: var(--size);

  height: var(--size);

  position: absolute;

  left: var(--progress-value-percent);

  top: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--progress-value-color);

  border-radius: 50%;

  content: attr(value);

  content: var(--progress-value-string, var(--value));

  font-size: 12px;

  font-weight: 700;

  color: #fff;

}



@-webkit-keyframes progress {

  from {

    --progress-value: 0;

  }

  to {

    --progress-value: var(--value);

  }

}



@keyframes progress {

  from {

    --progress-value: 0;

  }

  to {

    --progress-value: var(--value);

  }

}