A CodePen by Fabrice Weinberg.

index.html

<h1>atebits spinning logo</h1>
<div class="atebits"></div>

script.js

/*
  atebits Logo.

http://www.atebits.com/


Pure CSS by Fabrice Weinberg
*/

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

*,*:before,*:after{
   box-sizing: border-box;
}


.atebits{
  position:relative;
  width:60px;
  height:60px;
  margin:50px auto;
  
  animation:spin 2.2s infinite;
}


.atebits:before{
  position:absolute;
  content:'';
  
  top:50%;
  left:50%;
  
  width:1em;
  height:1em;
  
  margin:-.5em;
  
  border-radius:100%; 
  background:black;
  
  box-shadow:0 1.2em 0 0 black,
             1.2em 1.2em 0 0 black,
             -1.2em 1.2em 0 0 black,
             1.2em 0 0 0 black,
             -1.2em 0 0 0 black,
             1.2em -1.2em 0 0 black,
             -1.2em -1.2em 0 0 black;
}

@keyframes spin{
  0%{
    transform:rotate(0deg);
  }
  13%{
    transform:rotate(100deg);
  }
  23%{
    transform:rotate(90deg);
  }
  38%{
    transform:rotate(190deg);
  }
  48%{
    transform:rotate(180deg);
  }
  63%{
    transform:rotate(280deg);
  }
  73%{
    transform:rotate(270deg);
  }
  90%{
    transform:rotate(370deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

body{
  font-family:'Open Sans',sans-serif;
}

h1{
  font-size:30pt;
  text-align:center;
}