Рубрики
Без рубрики

Как создать пользовательский прогресс

Первоначально опубликовано на www.florin-pop.com Тема на неделю # 14 еженедельных кодировщиков является: Progress Bar Регулятор выполнения используется для показать, насколько далеко не выполняется действие пользователя, пока он не будет завершен. Хороший пример – это бар загрузки прогресса, которая показывает вам как

Автор оригинала: Florin Pop.

Первоначально опубликовано www.florin-pop.com

Тема На неделю # 14 из Недельный кодирующий вызов является:

Индикатор

Индикатор выполнения используется, чтобы показать, насколько далеко пользовательское действие все еще находится в процессе, пока он не будет завершен. Хорошим примером является панель загрузки, которая показывает, сколько файла уже загружено уже (или он также может быть загрузкой, если вы загрузите файлы?).

В этой статье мы собираемся построить этот вид Прогресс бар :

HTML

Для HTML-структуры нам нужны две вещи:

  1. А Контейнер которые будут отображать общую длину (100%) бара выполнения – .индикатор
  2. фактический элемент прогресса, который в основном отслеживает текущий прогресс (например, 20%) – .прогресс

Как вы можете увидеть .прогресс Div имеет Размер данных атрибут. Это будет использоваться в JavaScript на самом деле установить ширина прогресса. Вы увидите в любой момент, что я имею в виду, но сначала давайте стиль этих двух элементов. ?

CSS.

.progress-bar {
    background-color: #fefefe;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 15px;
    height: 30px;
    width: 500px;
    max-width: 100%;
}

.progress {
    background: #ad5389;
    background: -webkit-linear-gradient(to bottom, #3c1053, #ad5389);
    background: linear-gradient(to bottom, #3c1053, #ad5389);
    border-radius: 3px;
    height: 30px;
    width: 0;
    transition: width 0.5s ease-in;
}

Несколько вещей, которые следует отметить, что касается вышеуказанных CSS:

  1. Оба элемента являются прямоугольниками, которые имеют одинаковую высоту ( 30px ) и То же самое пограничный радиус
  2. Первоначально .прогресс ширина она установлена на 0 И мы обновим это в JavaScript код ниже
  3. Также .прогресс имеет хорошее Линейный градиент от Uigentients.
  4. Переход добавлено в .Прогресь используется для создания хорошей анимации, когда стоимость этого Размер данных атрибут динамически изменяется

JavaScript

Для этого нам нужно будет петить все .Прогресь Элементы (в нашем примере только один, но вы можете добавить несколько в приложении), чтобы получить их Набор данных значение и установить его как их ширину. Мы будем использовать процент ( % ) в этом случае.

const progress_bars = document.querySelectorAll('.progress');

progress_bars.forEach(bar => {
    const { size } = bar.dataset;
    bar.style.width = `${size}%`;
});

Мы используем немного Разрушение объекта Отказ

const {size.dataset.

такой же как:

const.dataset.size.

Но вы уже можете это знать?

Заключение

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

  1. Добавьте несколько вариантов цвета через разные классы
  2. Добавьте процентное значение
  3. Сделайте его анимацию динамически, изменив значение размера.

Я надеюсь, что вам понравилось, и убедитесь, что вы поделитесь со мной, что вы создаете!

Счастливое кодирование! ?

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-custom-progress-bar/”

Читайте ещё по теме: