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

Индикаторы выполнения — отличный визуальный инструмент для обозначения статуса или завершения задачи. Независимо от того, разрабатываете ли вы веб-приложение, настольное программное обеспечение или мобильное приложение, знание того, как реализовать индикаторы выполнения, может значительно улучшить взаимодействие с пользователем. В этой статье мы рассмотрим 10 различных методов создания индикаторов выполнения, а также приведем примеры кода, которые помогут вам начать работу.

Раздел 1. HTML и CSS
Метод 1. Использование HTML и CSS
Описание. Узнайте, как создать базовый индикатор выполнения с использованием стилей HTML и CSS.
Пример кода:

<div class="progress-bar">
  <div class="progress" ></div>
</div>

Метод 2. Стилизация с помощью CSS-фреймворков.
Описание. Используйте популярные CSS-фреймворки, такие как Bootstrap или Bulma, для создания стильных индикаторов выполнения.
Пример кода (Bootstrap):

<div class="progress">
  <div class="progress-bar" ></div>
</div>

Раздел 2: JavaScript
Метод 3: стандартный JavaScript
Описание: используйте JavaScript для динамического обновления индикатора выполнения в зависимости от завершения задачи.
Пример кода:

<div class="progress-bar">
  <div class="progress" id="progress" ></div>
</div>
<script>
  const progress = document.getElementById('progress');
  let percent = 0;
  function updateProgress() {
    if (percent < 100) {
      percent += 10;
      progress.style.width = percent + '%';
      setTimeout(updateProgress, 1000);
    }
  }
  updateProgress();
</script>

Метод 4: плагин jQuery
Описание: используйте плагин jQuery для упрощения процесса создания и обновления индикаторов выполнения.
Пример кода (с использованием плагина jQuery и ProgressBar.js):

<div class="progress-bar" id="progress"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/progressbar.js"></script>
<script>
  const progress = new ProgressBar.Line('#progress', {
    strokeWidth: 2,
    easing: 'easeInOut',
    duration: 2000,
    color: '#FFEA82',
    trailColor: '#eee',
    trailWidth: 1,
    svgStyle: { width: '100%', height: '100%' },
    text: {
      style: {
        color: '#999',
        position: 'absolute',
        right: '0',
        top: '30px',
        padding: 0,
        margin: 0,
        transform: null,
      },
      autoStyleContainer: false
    },
    step: (state, bar) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
    }
  });
  progress.animate(1.0); // Set progress to 100%
</script>

Раздел 3: Фреймворки и библиотеки
Метод 5: React.js
Описание: Узнайте, как создавать индикаторы выполнения с помощью библиотеки React.js.
Пример кода:

import React, { useState, useEffect } from 'react';
const ProgressBar = () => {
  const [percent, setPercent] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      if (percent < 100) {
        setPercent(prevPercent => prevPercent + 10);
      }
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="progress-bar">
      <div className="progress" style={{ width: `${percent}%` }}></div>
    </div>
  );
};
export default ProgressBar;

Метод 6: Vue.js
Описание: использование компонентов Vue.js для создания интерактивных индикаторов выполнения.
Пример кода:

<template>
  <div class="progress-bar">
    <div class="progress" : ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      percent: 0,
    };
  },
  mounted() {
    setInterval(() => {
      if (this.percent < 100) {
        this.percent += 10;
      }
    }, 1000);
  },
};
</script>

Индикаторы выполнения – это ценные элементы, позволяющие предоставить пользователям обратную связь и улучшить общий пользовательский опыт. В этой статье мы рассмотрели различные методы создания индикаторов выполнения, включая HTML и CSS, JavaScript и такие платформы, как React.js и Vue.js. Внедрив эти методы, вы сможете улучшить визуальное представление хода выполнения своих проектов и создать более привлекательные интерфейсы.

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