Loading Spinners
implementing multiple Loading Spinners Made with CSS and HTML only
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>
Our Style.css will be:
body {
background-color: #0dc5c1;
}
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
}
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);
}
}
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);
}
}
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);
}
}
.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
Top comments (5)
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.
And I think no problem to simplify the things for beginners, I re-write the code in more simple way to be more understandable
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.
I don't understand what is your problem
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.