<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #222;
}
circle.outer {
transform-origin: center;
animation: anime 5s linear infinite;
}
@keyframes anime {
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg version="1.1" baseProfile="full" width="10vmin" height="10vmin" viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<circle stroke="#e91e6311" fill-opacity="0" fill="none" stroke-width="50" cx="50%" cy="50%" r="100"></circle>
<circle class="outer" stroke="#e91e63dd" fill-opacity="0" fill="none" stroke-dasharray="157,1000" stroke-dashoffset="-500" stroke-linecap="round"
stroke-width="50" cx="50%" cy="50%" r="100"></circle>
</svg>
</body>
</html>
loading.gif
