html-css-javascript-online-editor-compiler

.loader {
  display:inline-block;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #8612ad;
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}

.loader-two {
  display:inline-block;
  border-radius: 50%;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #8612ad;
  border-bottom: 6px solid #8612ad;
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}

.loader-three {
  display:inline-block;
  border-radius: 50%;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #8612ad;
  border-right: 6px solid #00bcd4;
  border-bottom: 6px solid #e91e63;
  border-left: 6px solid #ff9800;
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}

.loader-four {
  display:inline-block;
  border-radius: 50%;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #8612ad;
  border-right: 6px solid #ff9800;
  border-bottom: 6px solid #e91e63;
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}

.loader-five {
  position:relative;
  display:inline-block;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: rotate 2s linear infinite;
}
.loader-five:before {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    background: #8612ad;
    border-radius: 50%;
    border: 5px solid #f6ddff;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Press Ctrl+Space Key for Auto complete and Intelli Sense