Loader by coding-masala

Made by

@coding-masala

Theme:

Light

#loader

#e8e8e8

148 views

CSSAdd prefixes

1.loader {
2  display: flex;
3  justify-content: center;
4}
5
6.loader-bar {
7  width: 4px;
8  height: 18px;
9  margin: 0 8px;
10  border-radius: 4px;
11  animation: loading_3194 1s ease-in-out infinite;
12  background-color: #333;
13}
14
15@keyframes loading_3194 {
16  0% {
17    transform: scale(1);
18  }
19
20  20% {
21    transform: scaleY(3);
22  }
23
24  40% {
25    transform: scale(1);
26  }
27}
28

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

.loader-bar {
  width: 4px;
  height: 18px;
  margin: 0 8px;
  border-radius: 4px;
  animation: loading_3194 1s ease-in-out infinite;
  background-color: #333;
}

@keyframes loading_3194 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scaleY(3);
  }

  40% {
    transform: scale(1);
  }
}

HTML

1<div class="loader">
2  <div class="loader-bar"></div>
3  <div class="loader-bar"></div>
4  <div class="loader-bar"></div>
5  <div class="loader-bar"></div>
6</div>
7

<div class="loader">
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
  <div class="loader-bar"></div>
</div>