DEV Community

Cover image for How to create a dot loading animation
Stackfindover
Stackfindover

Posted on • Updated on

How to create a dot loading animation

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create dot loading animation using HTML & CSS

Common Query

  1. Dot Loading Screen
  2. How to create a loading animation
  3. How to create an animated loading screen

See Also:-

  1. Animated share button with tooltip
  2. How to create water ripple effect

How to create dot loading animation step by step

First, we need to create two files index.html and style.css then we need to do code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>How to create Dot Loading Animation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="loader-outer">
    <div class="loader">
      <span class="dot dot-1"></span>
      <span class="dot dot-2"></span>
      <span class="dot dot-3"></span>
      <span class="dot dot-4"></span>
    </div>
  </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background: #000;
}

.loader>span {
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border-radius: 50%;
  position: relative;
  margin: 0 5px;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-1 {
  animation: anim 1s linear 0s infinite;
}

.dot-2 {
  animation: anim 1s linear 0.25s infinite;
}

.dot-3 {
  animation: anim 1s linear 0.50s infinite;
}

.dot-4 {
  animation: anim 1s linear 0.75s infinite;
}

@keyframes anim {
  0% {
    top: 0;
  }

  50% {
    top: 15px;
  }

  100% {
    top: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

How to create dot loading animation video output

How to create dot loading animation Codepen output

Top comments (5)

Collapse
 
ghoshriju33 profile image
Riju Ghosh • Edited

I always use the cubic bezier as described in the material guidelines. It feels more smooth.

cubic-bezier(0.4, 0.0, 0.2, 1 )

Collapse
 
manlikecliff profile image
ManLikeCliff

Linear is okay but cubic-bezier is way better.

Collapse
 
ghoshriju33 profile image
Riju Ghosh

Exactly!!!

Collapse
 
dannyengelman profile image
Danny Engelman

Or do it all in one SVG:

Collapse
 
lucascumsille profile image
Lucas Cumsille M.

Thank you!!