Skip to main content

Preloader For Website Pure Css | HTML And CSS

by Rustcode
Pure-css-Dot-Preloader-animation-for-website-rustcode

"Preloader for website" is a very important element or section for any website developer. In the website development world, a lot of website loader animations available which look very great and attractive but some of them have more loading time that makes our website response time slow. If our site has a low response time that is not good for us and as well as our visitors. A lot of web loaders have very huge css code that impacts our website loading time. You can check out our article which has more than 35 fancy loaders.

So in this post, we will learn how to create a website loader animation using only html and css. This loader has three dots and all the dots will change their size one by one. This animation looks very attractive and lightweight.



1. HTML

<!DOCTYPE html>
<html>
<head>
  <title>Three Dot Loader</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>

  <div class="container">
    <div class="dot-container">
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="dot dot-3"></div>
    </div>
  </div>

</body>
</html>


2. CSS

body{
  background-color: #344;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.dot-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 120px;
}
.dot{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3ff9dc;
}
.dot-1{
  animation-name: flow;
  animation-duration: .4s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.dot-2{
  animation: flow .4s ease .2s infinite alternate;
}
.dot-3{
  animation: flow .4s ease .4s infinite alternate;
}



3. ANIMATION CSS

@keyframes flow {
  from{
    opacity:1;
    transform: scale(1.2);
  }
  to{
    opacity: .20;
    transform: scale(.75);
  }
}


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.



Comments

Post a Comment