CodePen

HTML

            
              <div id='gif'></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body { background:black; overflow:hidden; }
#gif {
  background:black;
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px black,
    178px 0 0 -20px white,
    -178px 0 0 -25px black,
    -178px 0 0 -20px white, 
    0 0 0 20px black,
    0 0 0 30px white,
    0 0 0 130px black,
    0 0 0 135px white;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}
#gif:before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:black;
  border: 5px solid white;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px white;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}
#gif:after {
  /* Segmented circle code goes here */
  content: " ";
  position: absolute;
  height:280px;
  width:280px;
  left:-90px;
  top:-90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index:2;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;
}
@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px white,
      -178px 0 0 -25px black,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px white;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; 
    box-shadow:
      178px 0 0 -25px white,
      178px 0 0 -20px white,
      -178px 0 0 -25px white,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px white;
  }    
  100% { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }
}


@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px white,
      -178px 0 0 -25px black,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px white;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; 
    box-shadow:
      178px 0 0 -25px white,
      178px 0 0 -20px white,
      -178px 0 0 -25px white,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px white;
  }    
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Check out more of my projects here or at http://zachsaucier.com/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................