<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bar Loading</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="loading">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<!-- partial -->
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #ECEFFC;
}
.loading {
--loading-width: 45px;
position: relative;
width: var(--loading-width);
height: var(--loading-width);
transform: rotate(75deg);
}
.loading .bar {
position: absolute;
animation: 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.loading .bar:nth-child(1) {
bottom: calc(var(--loading-width) / 3);
width: calc(var(--loading-width) / 3);
height: 100%;
background: #0984e3;
transform: scaleY(0);
transform-origin: bottom;
animation-name: slide-bottom-top;
}
.loading .bar:nth-child(2) {
left: calc(var(--loading-width) / 3);
width: 100%;
height: calc(var(--loading-width) / 3);
background: #d63031;
transform: scaleX(0);
transform-origin: left;
animation-name: slide-left-right;
}
.loading .bar:nth-child(3) {
top: calc(var(--loading-width) / 3);
right: 0;
width: calc(var(--loading-width) / 3);
height: 100%;
background: #fdcb6e;
transform: scaleY(0);
transform-origin: top;
animation-name: slide-top-bottom;
}
.loading .bar:nth-child(4) {
right: calc(var(--loading-width) / 3);
bottom: 0;
width: 100%;
height: calc(var(--loading-width) / 3);
background: #00b894;
transform: scaleX(0);
transform-origin: right;
animation-name: slide-right-left;
}
@keyframes slide-bottom-top {
50% {
transform: scaleY(1);
transform-origin: bottom;
}
50.1% {
transform-origin: top;
}
to {
transform-origin: top;
}
}
@keyframes slide-left-right {
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform-origin: right;
}
to {
transform-origin: right;
}
}
@keyframes slide-top-bottom {
50% {
transform: scaleY(1);
transform-origin: top;
}
50.1% {
transform-origin: bottom;
}
to {
transform-origin: bottom;
}
}
@keyframes slide-right-left {
50% {
transform: scaleX(1);
transform-origin: right;
}
50.1% {
transform-origin: left;
}
to {
transform-origin: left;
}
}