@keyframes spin {
  100% {
    transform: rotate(-1turn);
  }
}


.body-container {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter:alpha(opacity=86);
-moz-opacity:0.86;
-khtml-opacity: 0.86;
opacity: 0.86;
z-index:888
}

.circle {
  height: 400px;
  width: 400px;
  background: #000;
  border-radius: 50%;
  margin: auto;
  position: relative;
  transition: transform 1.5s ease-out;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.8);
  animation: spin 3s linear infinite;
}

.circle-half {
  width: 200px;
  height: 400px;
  background: #fff;
  position: absolute;
  right: 0;
  border-radius: 0 200px 200px 0;
}

.white {
  height: 200px;
  width: 200px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  box-shadow: inset 1px -3px 10px 1px rgba(0, 0, 0, 0.5);
  /*   overflow: hidden; */
}

.white-inner {
  width: 100%;
  height: 100%;
  border-radius: 50% 45% 0 50%;
  background: linear-gradient(-90deg, #fff 50%, transparent 80%);
}

.black {
  height: 200px;
  width: 200px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  bottom: 0;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
}

.top-dot {
  background: #000;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  left: 162.5px;
  top: 63px;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5);
}

.bottom-dot {
  background: #fff;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  left: 162.5px;
  bottom: 63px;
}