html {
  min-height: 100%;
}




body{
  
  background: #eee url("http://www.xbladex.com/ARTWORK/fabric-background.jpg") no-repeat center;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
 
}







@-webkit-keyframes spin{
    from {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to{
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes spin{
    from {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to{
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg);
    }
}
.circle{
  -webkit-animation: spin 180s linear infinite;
  animation: spin 180s linear infinite;
  border: 5px solid #000000;
  border-radius: 150%;
  position: absolute;
    top: 50%;
    left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}



div#container {
  width: 200px;
  height: 200px;
}