Simple rotating loader

index.html

.loader

Simple rotating loader.markdown

Simple rotating loader

A Pen by Didier on CodePen.

License.

style.css

@backgroundColor: hsl(220, 3%, 95%);
@activeColor: hsl(220, 2%, 50%);

html, body {
  width: 100%;
  height: 100%;
  background: @backgroundColor;
}

.loader {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: @activeColor;
  border-radius: 400px;
  -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  animation: rotate 1s infinite linear;
  transition: all .25s ease-in-out;
  
  &:hover {
    background: red;
  }
  
  &:before {
    z-index: 1; 
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: @backgroundColor;
    left: 6%;
    top: 1%;
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  
  100% {
    transform: translate(-50%, -50%) rotate(360deg); 
  }
}