Прогресс-бар с HTML и CSS

Question

Я хочу создать индикатор выполнения, как показано на рисунке ниже:

Я понятия не имею о создании этого. Должен ли я использовать методы HTML5?

Не могли бы вы помочь мне с созданием этого индикатора?

Answer 1

Использование setInterval.

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)

.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}

<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>

Использование CSS Transtitions.

function loading()
{
    document.getElementById("progress").style.width="200px";
}

.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}

<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>

Answer 2

.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}

Answer 3

Существует учебник по созданию индикатора прогресса HTML5 здесь . Если вы не хотите использовать методы HTML5 или ищете решение для всех браузеров, попробуйте следующий код:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>

Вы можете изменить цвет GOLD на любой цвет индикатора выполнения, а #dbdbdb - на цвет фона индикатора выполнения.

Answer 4

Если вы хотите иметь индикатор выполнения без добавления какого-либо кода, PACE может быть отличным инструментом для вас.

Просто включите pace.js и CSS-тему на ваш выбор, иВы получаете красивый индикатор прогресса для загрузки вашей страницы и навигации AJAX.Лучшее в PACE - автоматическое обнаружение прогресса.

Он также содержит различные темы и цветовые схемы.

Стоит попробовать.

Answer 5

Почему вы не можете просто создать несколько картинок для каждой части строки состояния? Если это треть, просто покажите треть строки состояния ... это очень просто. Вы могли бы, вероятно, выяснить, как изменить его на следующее изображение на основе ввода с тегом формы. Вот моя часть кода, вы должны разобраться с формой позже

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

Теперь это кажется простым, не так ли?