CSS loader spinner to add white divider between the donut parts

I am trying to add some white dividers between blue and black. Please see the GIF animation below. Please edit my CSS in jsbin to mimic the same animation in the image. I only need CSS version of this animation without SVG or JS.

.spinner {
   height:60px;
   width:60px;
   animation: rotation 10s infinite linear;
   border-left:7px solid rgba(0,0,0,1);
   border-right:7px solid rgba(0,0,0,1);
   border-bottom:7px solid rgba(0,174,239,1);
   border-top:7px solid rgba(0,174,239,1);
   border-radius: 100%;
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

http://jsbin.com/ziniwexuwi/edit?html,css,output