CodePen

HTML

            
              <div id="timer">
	<div id="cover" class="circle"></div>
	<div id="color-left" class="color circle"></div>
	<div id="color-right" class="color circle"></div>
</div>
            
          
!

CSS

            
              #timer {
	height:250px;
  margin:auto;
	position:relative;
	width:250px;
}

.circle {
	border-radius:50%;
	bottom:1px;
	left:1px;
	position:absolute;
	right:1px;
	top:1px;
}

/* z-index */
#color-left {z-index:2;}
#color-right {z-index:3;}
#cover {z-index:4;}

/* backgrounds */
#cover {
	background:-webkit-linear-gradient(left, transparent 0, transparent 50%, #fff 50%, #fff 100%);
}

.color {
	background:-webkit-linear-gradient(left, transparent 0, transparent 50%, #0088cc 50%, #0088cc 100%);
}

#cover {
	bottom:0;
	left:0;
	right:0;
	top:0;
	visibility:hidden;
}

#color-left {-webkit-transform:rotate(180deg);}

@-webkit-keyframes firstspin {
 0% {visibility:visible;-webkit-transform:rotate(0);}
 50% {visibility:visible;-webkit-transform:rotate(180deg);}
 50% {visibility:hidden;-webkit-transform:rotate(180deg);}
 100% {visibility:hidden;-webkit-transform:rotate(180deg);}
}

@-webkit-keyframes secondspin {
 0% {visibility:hidden;-webkit-transform:rotate(0);}
 50% {visibility:hidden;-webkit-transform:rotate(0);}
 50% {visibility:visible;-webkit-transform:rotate(0);}
 100% {visibility:visible;-webkit-transform:rotate(180deg);}
}

#cover, #color-left {
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function: linear;
}

#cover {-webkit-animation-name: firstspin;}
#color-left {-webkit-animation-name: secondspin;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................