Как создать индикатор выполнения в HTML?

Индикаторы выполнения используются для определения определенных этапов выполнения задачи в процентах. Вы можете создать индикатор выполнения в который определяет ход выполнения задачи. Значением индикатора выполнения можно управлять с помощью JavaScript. В этой статье мы увидим, как создать индикатор выполнения с помощью HTML, CSS и JavaScript в следующей последовательности:

разница между орудиями и расширениями

• Как создать индикатор выполнения в HTML?
• Индикатор выполнения: пример

Давайте начнем.

Как создать индикатор выполнения в HTML?

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

Чтобы создать базовую полосу выполнения, используя , необходимо выполнить следующие шаги:

• Создайте структуру HTML для вашего индикатора выполнения - HTML тег указывает ход выполнения задачи.

• Добавление CSS - Следующим шагом является добавление цвета фона индикатора выполнения, а также статуса выполнения в панели с помощью CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• Добавление JavaScript - Следующим шагом будет создание динамической анимированной панели прогресса с помощью функции javascript Обновить и место действия .

function update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

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

Индикатор выполнения: пример

После того, как вы выполнили различные шаги по созданию индикатора выполнения, пора связать HTML, CSS и Элементы JavaScript . В следующем примере показан полный код индикатора выполнения, связывающего указанное выше HTML, CSS и JavaScript Коды:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Пример индикатора выполнения с использованием JavaScript
 
Статус загрузки файла:
  
Начать загрузку функции update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Вывод:

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

Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и опыт реальных проектов. Это обучение поможет вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Есть вопрос к нам? Пожалуйста, укажите это в комментариях к этому блогу, и мы свяжемся с вами.