Progress Bar #

Smooth progress bar with updates from a server

If you look at source, there is a button targeting parent div. When you click it, server responds with a new markup, which will make a request to a server again in 500 ms thanks to ts-trigger="load delay 500".

Interesting part of that response is div id="pb1", which is actually progress bar. Each new response from the server uses the same id, so settling kicks in, and makes .bar-item transition work.

Demo

Start progress