HTML

 <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>

CSS



  #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 }
  }