Набор интересных прелоадеров на чистом CSS
HTML
<div class="container">
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
<div class="spinner">
<div class="spinner-item"></div>
<div class="spinner-item"></div>
</div>
</div>
CSS
:root {
--size: 75px;
--clr-bg: #272324;
--clr1: #bb8;
--clr2: #ccc68d;
--clr3: #ed9;
--clr4: #eec290;
--clr5: #ea8;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--clr-bg);
display: grid;
place-items: center;
}
.container {
margin-top: 7rem;
margin-bottom: 7rem;
display: grid;
grid-template-columns: repeat(2, auto);
place-items: center;
gap: 7rem;
}
@media (min-width: 600px) {
.container {
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(3, auto);
}
}
.spinner:nth-child(1) {
--animation-duration: 1000ms;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.spinner:nth-child(1) .spinner-item {
width: calc(var(--size) / 12);
height: 80%;
background: var(--clr-spinner);
animation: spinner1 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner1 {
50% {
transform: scaleY(0.25);
}
}
.spinner:nth-child(1) .spinner-item:nth-child(1) {
--clr-spinner: var(--clr1);
animation-delay: calc(var(--animation-duration) / 10 * -3);
}
.spinner:nth-child(1) .spinner-item:nth-child(2) {
--clr-spinner: var(--clr5);
animation-delay: calc(var(--animation-duration) / 10 * -1);
}
.spinner:nth-child(1) .spinner-item:nth-child(3) {
--clr-spinner: var(--clr3);
animation-delay: calc(var(--animation-duration) / 10 * -2);
}
.spinner:nth-child(1) .spinner-item:nth-child(4) {
--clr-spinner: var(--clr4);
animation-delay: calc(var(--animation-duration) / 10 * -1);
}
.spinner:nth-child(1) .spinner-item:nth-child(5) {
--clr-spinner: var(--clr2);
animation-delay: calc(var(--animation-duration) / 10 * -3);
}
.spinner:nth-child(2) {
--animation-duration: 650ms;
position: relative;
width: var(--size);
height: var(--size);
}
.spinner:nth-child(2) .spinner-item {
position: absolute;
width: var(--item-size);
height: var(--item-size);
top: calc(50% - var(--item-size) / 2);
left: calc(50% - var(--item-size) / 2);
border: 4px solid transparent;
border-left: 4px solid var(--clr-spinner);
border-right: 4px solid var(--clr-spinner);
border-radius: 50%;
animation: spinner2 var(--animation-duration) linear infinite;
}
@keyframes spinner2 {
to {
transform: rotate(360deg);
}
}
.spinner:nth-child(2) .spinner-item:nth-of-type(1) {
--item-size: var(--size);
--clr-spinner: var(--clr1);
border-top: 4px solid var(--clr1);
}
.spinner:nth-child(2) .spinner-item:nth-of-type(2) {
--item-size: calc(var(--size) - 15px);
--clr-spinner: var(--clr5);
border-bottom: 4px solid var(--clr5);
}
.spinner:nth-child(2) .spinner-item:nth-of-type(3) {
--item-size: calc(var(--size) - 30px);
--clr-spinner: var(--clr3);
border-top: 4px solid var(--clr3);
}
.spinner:nth-child(3) {
--animation-duration: 5000ms;
position: relative;
width: var(--size);
height: var(--size);
transform: rotate(45deg);
}
.spinner:nth-child(3) .spinner-item {
--item-size: calc(var(--size) / 2.5);
position: absolute;
width: var(--item-size);
height: var(--item-size);
border: 4px solid var(--clr-spinner);
}
.spinner:nth-child(3) .spinner-item:nth-child(1) {
--clr-spinner: var(--clr1);
top: 0;
left: 0;
animation: spinner3A var(--animation-duration) linear infinite;
}
@keyframes spinner3A {
0%, 8.33%, 16.66%, 100% {
transform: translate(0%, 0%);
}
24.99%, 33.32%, 41.65% {
transform: translate(100%, 0%);
}
49.98%, 58.31%, 66.64% {
transform: translate(100%, 100%);
}
74.97%, 83.3%, 91.63% {
transform: translate(0%, 100%);
}
}
.spinner:nth-child(3) .spinner-item:nth-child(2) {
--clr-spinner: var(--clr3);
top: 0;
left: var(--item-size);
animation: spinner3B var(--animation-duration) linear infinite;
}
@keyframes spinner3B {
0%, 8.33%, 91.63%, 100% {
transform: translate(0%, 0%);
}
16.66%, 24.99%, 33.32% {
transform: translate(0%, 100%);
}
41.65%, 49.98%, 58.31% {
transform: translate(-100%, 100%);
}
66.64%, 74.97%, 83.3% {
transform: translate(-100%, 0%);
}
}
.spinner:nth-child(3) .spinner-item:nth-child(3) {
--clr-spinner: var(--clr5);
top: var(--item-size);
left: var(--item-size);
animation: spinner3C var(--animation-duration) linear infinite;
}
@keyframes spinner3C {
0%, 83.3%, 91.63%, 100% {
transform: translate(0, 0);
}
8.33%, 16.66%, 24.99% {
transform: translate(-100%, 0);
}
33.32%, 41.65%, 49.98% {
transform: translate(-100%, -100%);
}
58.31%, 66.64%, 74.97% {
transform: translate(0, -100%);
}
}
.spinner:nth-child(4) {
--animation-duration: 1150ms;
}
.spinner:nth-child(4) .spinner-item {
--item-size: calc(var(--size) / 4);
width: var(--item-size);
height: var(--item-size);
display: inline-block;
margin: 0 3px;
border-radius: 50%;
border: 4px solid var(--clr-spinner);
animation: spinner4 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner4 {
0%, 100% {
transform: translateY(75%);
}
50% {
transform: translateY(-75%);
}
}
.spinner:nth-child(4) .spinner-item:nth-child(1) {
--clr-spinner: var(--clr5);
animation-delay: calc(var(--animation-duration) / 6 * -1);
}
.spinner:nth-child(4) .spinner-item:nth-child(2) {
--clr-spinner: var(--clr3);
animation-delay: calc(var(--animation-duration) / 6 * -2);
}
.spinner:nth-child(4) .spinner-item:nth-child(3) {
--clr-spinner: var(--clr1);
animation-delay: calc(var(--animation-duration) / 6 * -3);
}
.spinner:nth-child(5) {
--animation-duration: 1000ms;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.spinner:nth-child(5) .spinner-item {
height: 40%;
background-color: var(--clr-spinner);
width: calc(var(--size) / 13);
animation: spinner5 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner5 {
25% {
transform: scaleY(2);
}
50% {
transform: scaleY(1);
}
}
.spinner:nth-child(5) .spinner-item:nth-child(1) {
--clr-spinner: var(--clr1);
}
.spinner:nth-child(5) .spinner-item:nth-child(2) {
--clr-spinner: var(--clr3);
animation-delay: calc(var(--animation-duration) / 10);
}
.spinner:nth-child(5) .spinner-item:nth-child(3) {
--clr-spinner: var(--clr5);
animation-delay: calc(var(--animation-duration) / 10 * 2);
}
.spinner:nth-child(5) .spinner-item:nth-child(4) {
--clr-spinner: var(--clr4);
animation-delay: calc(var(--animation-duration) / 10 * 3);
}
.spinner:nth-child(5) .spinner-item:nth-child(5) {
--clr-spinner: var(--clr2);
animation-delay: calc(var(--animation-duration) / 10 * 4);
}
.spinner:nth-child(6) {
--animation-duration: 3000ms;
position: relative;
width: var(--size);
height: var(--size);
}
.spinner:nth-child(6) .spinner-item {
position: absolute;
top: calc(50% - var(--size) / 2);
left: calc(50% - var(--size) / 2);
width: var(--size);
height: var(--size);
background: var(--clr-spinner);
border-radius: 50%;
animation: spinner6 var(--animation-duration) ease-in-out infinite;
}
@keyframes spinner6 {
0%, 100% {
transform: scale(0.25);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
.spinner:nth-child(6) .spinner-item:nth-of-type(1) {
--clr-spinner: var(--clr1);
}
.spinner:nth-child(6) .spinner-item:nth-of-type(2) {
--clr-spinner: var(--clr5);
animation-delay: calc(var(--animation-duration) / -2);
}