CodePen

HTML

            
              <section class="wrapper">
  <div class="one"><span></span></div>
  <div class="two"><span></span></div>
</section>
            
          
!

CSS

            
              
body {
 	background-color: #CCCCCC;
  background: radial-gradient(circle, white, #CCCCCC);
}
.wrapper	{
  width: 200px; 
  height: 200px;
  margin: 0 auto;
  padding: 2.5%;
}

div.one, div.two	{
 	margin: 0;
  padding: 0;
  float: left;
  background: transparent;
  height: 100%;
  width: 50%;
  overflow: hidden;
  position: relative;
}
div span	{
 	display:  block;
  width: 200%;
  height: 100%;
  box-sizing: border-box;
  float: left;
  background: transparent;
  border: 30px solid rgba(0,0,0,.5);
  border-radius: 200%;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
}
div.one span	{
  transform: rotate(135deg);
  animation: rotate1 8s infinite linear;
}
div.two span	{
  transform: rotate(-45deg);
  animation: rotate2 8s infinite linear;
 }
div.two span	{
	margin-left: -100%;
}
.wrapper:hover div.one span, .wrapper:hover div.two span	{
 	 animation-play-state: paused;
}

@keyframes rotate1	{
  0% { transform: rotate(135deg); opacity: 1; 	}
  50% {  transform: rotate(135deg); }
 	100% {  transform: rotate(315deg); opacity: 0.25; 	}
}
@keyframes rotate2	{
  0% {  transform: rotate(-45deg); opacity: 1; 	}
  50% {  transform: rotate(135deg);}
  100% { transform: rotate(136deg); opacity: 0.25; }
}
@-webkit-keyframes rotate1	{
  0% { transform: rotate(135deg); 	}
  50% {  transform: rotate(135deg); }
 	100% {  transform: rotate(315deg); 	}
}
@-webkit-keyframes rotate2	{
  0% {  transform: rotate(-45deg); 	}
  50% {  transform: rotate(135deg);}
  100% { transform: rotate(136deg); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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