0

Hy, so I am trying to programm a progress bar to update every 5 seconds. I am using clarity and angular cli.

My html code looks like this:

Progress Bar

<div class="progress demo"> <progress max="100" value="0" data-displayval="0%"></progress> </div>

i used jquery until now, but for this project I need to use Angular and I basically have no idea how to make it work. I would be really thankful for your answers!

Keri
  • 11
  • 2
  • you can simply use setTimeout to call a function that incremets – radio_head Feb 01 '18 at 15:25
  • Is the `data-displayval="0%"` actually represented by a value or is it literally just `+1%` every 5 seconds ? – Zze Feb 06 '18 at 23:30
  • 1
    Take a look at the demo app we use to test Clarity releases against. In the progress bar demo you might find some code that helps: https://github.com/vmware/clarity/tree/master/src/ks-app/src/app/containers/progress – hippeelee Feb 07 '18 at 00:37

1 Answers1

0

Try something like this -

<div class="progress demo">
   <progress max="100" [value]="myFunc()" data-displayval="0%"></progress>
</div>

The function should return a number and inside the function you can handle the logic to make an update call every five seconds. Depending on what you are using this for, in Angular 6 you can listen to progress events (url).

ps.1117
  • 1
  • 3