<figure class="spinner">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="xMidYMid" style="background: none;">
<circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle>
<circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
</circle>
</svg>
</figure>
<figure class="spinner">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="xMidYMid" style="background: none;"><circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle><circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform><animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate></circle></svg>
</figure>
/* No context defined. */
@charset 'UTF-8';
// IE Specific animation
_:-ms-lang(x),
.spinner {
width: 100%;
height: 100%;
overflow: hidden;
svg,
g {
animation: spin 2s linear infinite;
}
g {
transform-origin: center center;
}
circle {
stroke: $color-ocean;
+ circle {
stroke-dasharray: 100;
stroke: $color-ocean-light;
}
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
No notes defined.