How to Create Animation Circle Loader With HTML & CSS


How to Create a Circle Loader Animation with HTML and CSS - Circle Loader Animation or commonly called a Circle Loading Animation can be created only with HTML and CSS. This animation is usually used when a Page is strengthening, then this animation will be displayed.

There are so many types of Loader Animations that are used on a website, but not all of them use Pure CSS, some use Loader Animations in the form of GIFs, etc. Therefore, here I want to share a Circle Loader Animation which is made using Pure CSS only, and the HTML is used to display the contents of the CSS.

Okay, let's go straight to the tutorial on how to create an animation circle loader with HTML and CSS , let's take a good look at the tutorial below.

Cara Membuat Animation Circle Loader Pure CSS

How to make the Circle Loader Animation is also very easy, you only need a Text Editor, be it Sublime Text, Visual Studio Code, Atom, etc.

1. First, create an html file with the name circle-animation.html, then fill the file with the HTML framework below
<!doctype html>
<html>
<head>
    <!-- Title atau Judul -->
    <title>Cara Membuat Animation Circle Loader Pure CSS</title>
    <!-- CSS Animation -->
    <link rel="stylesheet" href="circle-style.css" />
</head>
<body>
    <div class="main-wrapper">
        <div class="circle-loader"></div>
    </div>
</body>
</html>
2. Then, create a css file with the name circle-style.css, then fill the file with the CSS below,
html, body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #000;
}
.circle-loader {
    display: block;
  }
.circle-loader:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10rem;
    height: 10rem;
    margin: -4rem;
    border: 2px solid rgba(41 98 255 / 0.1);
    border-left-color: #2962ff;
    border-right-color: #2962ff;
    border-radius: 100%;
    animation: spinner 0.8s infinite linear;
    transform-origin: center;
}
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }
3. Finally, save the two files, and run the file circle-animation.html, and see the results.

DEMO

Animation Circle Loader above uses Pure CSS, so it will not affect the Speed ​​or Performance of your website. And you can also develop Circle Animation above to make it even more interesting. 

Maybe that's all I can share about the tutorial   How to Create Anmation Circle Loader With HTML and CSS . If you have problems or difficulties while following the tutorial above, you can comment below so I can help you solve the problem.