DEV Community

Fadi Nouh
Fadi Nouh

Posted on

Implementing Multiple Loading Spinners Made with Pure CSS and HTML

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.