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

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

Я пробовал 3 способа, ни один из них не работает, как я написал.

  • Использование CSS
.base{
    height: 10px;
    width: 100%;
    background: #ddd;
}

.pBar{
    height: 10px;
    background: #009200;
}

а в component.html:

<div class = "base">
    <div class = "pBar" [ngStyle] = "{'width.%':value}"></div>
</div>

где «значение» — это числовое значение, объявленное в component.ts и инициализированное значением 10 в ngOnInit().

Результат: индикатор выполнения на 100%, если я изменяю «значение», результат остается неизменным

  • Использование библиотеки Материал v13.3.6

импорт библиотеки и вставка ее в импорт module.ts а затем вставить его в component.html:

<mat-progress-bar mode = "determinate" value = "40" color = "warn"></mat-progress-bar>

Результат: черная полоса, которая начинается от середины экрана и доходит до правого конца; меняя значение даже вручную ничего не меняется.

  • Использование библиотеки Начальная загрузка v4

Я импортировал библиотеку из терминала и использовал ее в компоненте html:

<div class = "progress">
  <div class = "progress-bar" role = "progressbar" style = "width: 25%" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"></div>
</div>

вставив ниже js-скрипт с setInterval для постепенного изменения значения aria-valuenow и ширины:

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

Результат: фиксированная полоса на 100%, но вручную изменив значение ширины, полоса, конечно, изменила размер

Я сделал что-то не так? Как я могу достичь своей цели? Спасибо

Решение:

Спасибо Себастьяну Сервузу за то, что указал мне путь.

Это индикатор выполнения, который я хотел сделать (с использованием начальной загрузки 4)

В компоненте.html:

<div class = "progress">
      <div class = "progress-bar progress-bar-striped progress-bar-animated bg-danger" role = "progressbar" [ngStyle] = "{'width.%': progress * 100}" [attr.aria-valuenow] = "progress" aria-valuemin = "0" aria-valuemax = "100"></div>
    </div>

В компоненте .ts:

import { timer } from 'rxjs';

progress!:number;
ngOnInit(): void {
this.progress = 0;
this.start(); }

start(){
    timer(0, 50).subscribe(()=>{
      while (this.progress < 1)
        this.progress+=0,01;
    });}

Надеюсь, я помог кому-то еще.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Самый простой код, который я могу придумать

  1. Установите два div, один для фона, один для заливки, установите ширину div-заполнителя с помощью ngStyle, где прогресс — это число от 0 до 1.
<div class = "progress-bar">
  <div class = "progress-bar-fill" [ngStyle] = "{'width.%': progress * 100}"></div>
</div>
  1. Установите ширину и высоту индикатора выполнения, чтобы вы могли использовать % для ширины. Также установите высоту для заполнения div
.progress-bar {
  width: 200px;
  height: 25px;
  background-color: #222;
}

.progress-bar-fill {
  background-color: #5F5;
  height: 100%; /* This is important */
}

Вы можете использовать тег <progress> для использования встроенной панели прогресса, больше об этом вы можете найти здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress И здесь: https://css-tricks.com/html5-progress-element/

Другие вопросы по теме