DEV Community

Fadi Nouh
Fadi Nouh

Posted on

Implementing Multiple Loading Spinners Made with Pure CSS and HTML

#html #css #spinners #loading

Loading Spinners

implementing multiple Loading Spinners Made with CSS and HTML only

loading spinners

You can check an explanation video how this is built:
implementing multiple Loading Spinners Made with CSS and HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="spinner-1.css" />
    <link rel="stylesheet" href="spinner-2.css" />
    <link rel="stylesheet" href="spinner-3.css" />
    <link rel="stylesheet" href="spinner-4.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="spinner-1">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <div class="spinner-2">
        <div class="dot1"></div>
        <div class="dot2"></div>
      </div>

      <div class="spinner-3">
        <div class="cube1"></div>
        <div class="cube2"></div>
        <div class="cube3"></div>
        <div class="cube4"></div>
        <div class="cube5"></div>
        <div class="cube6"></div>
        <div class="cube7"></div>
        <div class="cube8"></div>
        <div class="cube9"></div>
      </div>

      <div class="spinner-4"></div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Our Style.css will be:

body {
  background-color: #0dc5c1;
}
.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

First Spinner Style: 

.spinner-1 {
  margin: 100px auto;
  width: 50px;
  height: 50px;
  text-align: center;
}

.spinner-1 > div {
  background-color: #fff;
  height: 60px;
  width: 6px;
  display: inline-block;
  animation: stretchrect 0.8s infinite ease-in-out;
}

.spinner-1 .rect1 {
  animation-delay: -1s;
}
.spinner-1 .rect2 {
  animation-delay: -0.9s;
}
.spinner-1 .rect3 {
  animation-delay: -0.8s;
}
.spinner-1 .rect4 {
  animation-delay: -0.7s;
}
.spinner-1 .rect5 {
  animation-delay: -0.6s;
}

@keyframes stretchrect {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.8);
  }
}
Enter fullscreen mode Exit fullscreen mode

Second Spinner Style: 


.spinner-2 {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;

  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;

  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
Enter fullscreen mode Exit fullscreen mode

Third Spinner Style: 

.spinner-3 {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.spinner-3 > div {
  width: 33%;
  height: 33%;
  background-color: #fff;
  float: left;
  -webkit-animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.spinner-3 .cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.spinner-3 .cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.spinner-3 .cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.spinner-3 .cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.spinner-3 .cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.spinner-3 .cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.spinner-3 .cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.spinner-3 .cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.spinner-3 .cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@keyframes cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
Enter fullscreen mode Exit fullscreen mode 
.spinner-4 {
  width: 40px;
  height: 40px;
  background-color: #fff;

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(-180deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
afif profile image
Temani Afif • • Edited

Taken from here: tobiasahlin.com/spinkit/ (github.com/tobiasahlin/SpinKit). I can see the same code, you simply changed some naming.
Maybe give proper attribution instead of claming your are the author.

Collapse
 
fadinouh1 profile image
Fadi Nouh • • Edited

And I think no problem to simplify the things for beginners, I re-write the code in more simple way to be more understandable

Collapse
 
afif profile image
Temani Afif •

But it's good to "respect" other people work. You are free to explain an existing code or use it under a particular licence but It's good to consider a small attribution for the original author and not claim you are the author.

Thread Thread
 
fadinouh1 profile image
Fadi Nouh •

I don't understand what is your problem

  • The code is different
  • I didn't use the whole spinners which he has
  • I just used the design , and those spinners are in many other places as well
  • I added the reference at the end for advance level coders
Thread Thread
 
afif profile image
Temani Afif •

I have no problem, I simply pointed to the original source of your code and sorry it's not different, I verified and it's the same code. Changing the names of the classes doesn't make it a different code.

As a moderator here, I have the obligation to verify the content posted here and especially when it comes to plagiarism.

Again, I have no problem with you and with the code you are using. I simply pointed that you used a code from another source, that's all.

Read next

okande-dev profile image

Understand Tables: HTML in 180 Seconds - Episode 5

Renato Junior -

codevsom profile image

Creating A Lightweight Code Editor Using Vanilla Js

Somnath Pan -

demgoncalves profile image

Microsoft está jogando pesado com Web Components e você deveria prestar atenção!

<deMGoncalves /> -

56_kode profile image

Responsive Images: a quick example with react

56kode -