DEV Community

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

How to create a dot loading animation

Stackfindover
Hii i'm Rahul Jangir, a tech geek, designing enthusiast and an online expert could be a graduate in technology who is addicted to front-end development.
Updated on ・2 min read

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

Discussion (6)

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
raghav9official profile image
Raghav Yadav

Awesome!

Collapse
lucascumsille profile image
Lucas Cumsille M.

Thank you!!

Forem Open with the Forem app