animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Responsive animated progress bar to donut

1<div class="container">
2  <span class="label">Wind (m/s) </span>
3  <div class="progressContainer">
4    <svg class="progress" viewBox="0 0 400 100">
5      <path
6            class="drop"
7            style="fill:none;stroke:#d0d0d0;stroke-width:8;stroke-linecap:round;"
8            d="m 20,80 c 0,0 60,-0.001 90,-0.001 30,0 60,0.001 90,0.001 30,0 60,-0.001 90,-0.001 30,0 90,0.001 90,0.001" />
9      <path
10            class="range"
11            style="fill:none;stroke:#3cc124;stroke-width:8;stroke-linecap:round;"
12            d="m 20,80 c 0,0 60,-0.001 90,-0.001 30,0 60,0.001 90,0.001 30,0 60,-0.001 90,-0.001 30,0 90,0.001 90,0.001" />
13    </svg>
14  </div>
15</div>
16<div class="container">
17  <span class="label">Current (mA)</span>
18  <div class="progressContainer">
19    <svg class="progress" viewBox="0 0 400 100">
20      <path
21            class="drop drop2"
22            style="fill:none;stroke:#d0d0d0;stroke-width:8;stroke-linecap:round;"
23            d="m 20,80 c 0,0 60,-0.001 90,-0.001 30,0 60,0.001 90,0.001 30,0 60,-0.001 90,-0.001 30,0 90,0.001 90,0.001" />
24      <path
25            class="range range2"
26            style="fill:none;stroke:#6397e4;stroke-width:8;stroke-linecap:round;"
27            d="m 20,80 c 0,0 60,-0.001 90,-0.001 30,0 60,0.001 90,0.001 30,0 60,-0.001 90,-0.001 30,0 90,0.001 90,0.001" />
28    </svg>
29  </div>
30</div>
31