Progress Bar
HTML #
1<div id="progress-bar"
2 data-init="@get('/examples/progress_bar/updates', {openWhenHidden: true})"
3>
4 <!-- When progress is less than 100% -->
5 <svg
6 width="200"
7 height="200"
8 viewbox="-25 -25 250 250"
9 style="transform: rotate(-90deg)"
10 >
11 <circle
12 r="90"
13 cx="100"
14 cy="100"
15 fill="transparent"
16 stroke="#e0e0e0"
17 stroke-width="16px"
18 stroke-dasharray="565.48px"
19 stroke-dashoffset="565px"
20 ></circle>
21 <circle
22 r="90"
23 cx="100"
24 cy="100"
25 fill="transparent"
26 stroke="#6bdba7"
27 stroke-width="16px"
28 stroke-linecap="round"
29 stroke-dashoffset="282px"
30 stroke-dasharray="565.48px"
31 ></circle>
32 <text
33 x="44px"
34 y="115px"
35 fill="#6bdba7"
36 font-size="52px"
37 font-weight="bold"
38 style="transform:rotate(90deg) translate(0px, -196px)"
39 >50%</text>
40 </svg>
41
42 <!-- When progress is 100% -->
43 <button data-indicator:_fetching
44 data-attr:aria-disabled="`${$_fetching}`"
45 data-on:click="
46 !$_fetching && @get('/examples/progress_bar/updates', {openWhenHidden: true})
47 "
48 >
49 <i class="material-symbols:check-circle"></i>
50 Completed! Try again?
51 </button>
52</div>Explanation #
This example shows an updating progress graphic using SSE. The server sends down a new progress bar svg every 500 milliseconds causing the client to update. After the progress is complete, the server sends down a button allowing the user to restart the progress bar.
Note #
The openWhenHidden option is used to keep the connection open even when the progress bar is not visible. This is useful for when the user navigates away from the page and then returns.