Square Loader

In this example below you will see how to do a Square Loader with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by z-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright z- ©
  • HTML
  • CSS
  • JavaScript
    <div class="loader"></div>

/*Downloaded from https://www.codeseek.co/z-/square-loader-wayRxX */
    .loader {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border:24px solid #000;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  animation: squareloader 1.6s ease infinite;
}
@keyframes squareloader {
  0%, 100% {
    border-top-left-radius:600px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
  }
  25% {
    border-top-left-radius:0px;
    border-top-right-radius:600px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
  }
  50% {
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-right-radius:600px;
    border-bottom-left-radius:0px;
  }
  75% {
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:600px;
  }
}


/*Downloaded from https://www.codeseek.co/z-/square-loader-wayRxX */
    pentitle="Quarter Loader";

Comments