<div id="clock">
<svg id="countdownclock" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="63.333px" height="73.333px" viewBox="0 0 63.333 73.333" style="enable-background:new 0 0 63.333 73.333;"
xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
]]>
</style>
<polygon class="clockline" points="4.701,21.098 4.701,52.235 31.667,67.804 58.632,52.235 58.632,21.098 31.667,5.529 "/>
</svg></div>
#clock{
}
#countdownclock{
transform: rotate(60deg);
}
#clock .clockline{fill:none;
stroke:#333;
stroke-width:8;
stroke-linecap: round;
stroke-miterlimit:10;
stroke-dasharray: 20 35;
stroke-dashoffset:1100;
animation: draw 2s .2s linear infinite ;
fill-opacity:1;
}
@keyframes draw {
20%{stroke:#333}
40%{stroke:#663ab6}
60%{stroke:#0b5497}
100%{stroke-dashoffset:0; stroke:#0ecef5 }
}