<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body {
display: grid;
place-items: center;
}
.loader {
display: flex;
gap: 0.6rem;
}
.box {
width: 50px;
height: 50px;
background: #0043bc;
animation: rotate 3s infinite;
}
.box:nth-child(2) {
animation-delay: 0.25s;
}
.box:nth-child(3) {
animation-delay: 0.5s;
}
@keyframes rotate {
50% {
transform: rotate(180deg);
background: rgb(0, 112, 255);
background: linear-gradient(90deg,
rgba(0, 112, 255, 1) 45%,
rgba(0, 67, 188, 1) 100%);
}
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h2
style
=
"color:green"
>
Minimal shape rotating Loader
</
h2
>
<
div
class
=
"loader"
>
<
div
class
=
"box"
></
div
>
<
div
class
=
"box"
></
div
>
<
div
class
=
"box"
></
div
>
</
div
>
</
body
>
</
html
>