The Division - Boot Up(Animated)
HTML
<svg width="100" height="100" viewBox="0 0 75 75">
<circle cx="37.5" cy="37.5" r="24" stroke="#ff7f00" fill="none" stroke-width="3" />
<circle cx="37.5" cy="37.5" r="37" stroke="#333" fill="none" stroke-width="1" />
<g transform="rotate(-86.303, 37.5, 37.5)">
<circle cx="37.5" cy="37.5" r="31" stroke="#333" fill="none" stroke-width="5" stroke-dasharray="28.463, 4" />
<circle id="wedge" cx="37.5" cy="37.5" r="31" stroke="#ff7f00" fill="none" stroke-width="5" stroke-dasharray="28.463, 166.316" />
</g>
</svg>
CSS
body {
background: #000;
color: #ccc;
text-align: center;
}
svg {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
JAVASCRIPT
// reference
// https://www.youtube.com/watch?v=AQdDVrHOKB8
var angle = 0;
var increment = 60;
var wedge = document.getElementById('wedge');
var cx = wedge.getAttribute('cx');
var cy = wedge.getAttribute('cy');
var interval = 2000 / 6;
setInterval(function () {
wedge.setAttribute('transform', 'rotate(' + angle + ', ' + cx + ', ' + cy + ')');
angle = (angle >= 360 - increment) ? 0 : angle + increment;
}, 333.333);
