Implementing Multiple Loading Spinners Made with Pure CSS and HTML
Tags: html, css, spinners, loading
Published: 2021-06-15 09:36:55

## Loading Spinners 
implementing multiple Loading Spinners Made with CSS and HTML only


![loading spinners](https://bluebits.dev/wp-content/uploads/2021/03/loading-spinner.gif)


You can check an explanation video how this is built: 
[implementing multiple Loading Spinners Made with CSS and HTML](https://bluebits.dev/2021/06/15/loading-spinners/)

```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>
```

Our Style.css will be:

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

.container > div {
  width: 100px;
  height: 100px;
}
```

### First Spinner Style:

```css
.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);
  }
}
```

### Second Spinner Style:

```css
  
.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);
  }
}
```


### Third Spinner Style:


```css
.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);
  }
} 
```

```css
.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);
  }
}
```


- Repository: https://github.com/bluebits-academy/loading-spinners
- Reference from (for advance coders) : https://github.com/tobiasahlin/SpinKit