<div class="container">
<div class="box">
</div>
</div>
html,
body {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #00136c;
}
p {
font-size: 24px;
color: #fff;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box {
animation: loader 1.25s infinite;
background-color: red;
width: 50px;
height: 50px;
color: #00136c;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes loader {
0% {
rotate: 0deg;
}
100% {
border-radius: 50%;
rotate: 180deg;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.