Progress tag

09 Декабря 2019 12:23

Тег progress дает возможность без всяких костылей организовать отображение процесса загрузки или других элементов, где нужно визуализировать прогресс.

Пример:

HTML

<progress id="progress" value="100" max="300">
    Загружено <span id="percent">0</span>%
</progress>

CSS

::-webkit-progress-bar {
    background: yellow;
}
::-webkit-progress-value {
    background: red;
}
::-moz-progress-bar {
    background: red;
}
progress {
    display: block;
    color: red;
    background: yellow;
    border: 2px solid red;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    height: 25px;
    line-height: 21px;
    font-size: 15px;
    font-family: sans-serif;
    text-align: center;
}

Результат