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

rendered animation

Pure CSS Animated Circular Progress Bar

1<head>
2  <title>Pure CSS Animated Circular Progress Bar</title>
3</head>
4
5<body>
6  <div class="skill">
7    <div class="outer">
8      <div class="inner">
9        <div id="number"></div>
10        <!-- <img src="css.png" alt="" height="50" /> -->
11      </div>
12    </div>
13
14    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
15      <defs>
16        <linearGradient id="GradientColor">
17          <stop offset="0%" stop-color="#e91e63" />
18          <stop offset="100%" stop-color="#673ab7" />
19        </linearGradient>
20      </defs>
21      <circle cx="100" cy="100" r="86" stroke-linecap="round" />
22    </svg>
23  </div>
24</body>