1,0×
00:00/00:08
Описание
Спиннеры загрузки на HTML + CSS
10 месяцев назад • 25 просмотров
ФАЙЛ HTML:<div class="dots-1"></div>
<div class="dots-2"></div>
<div class="dots-3"></div>
<div class="dots-4"></div>
<div class="dots-5"></div>
<div class="dots-6"></div>
ФАЙЛ CSS:
.dots-1 {
height: 15px;
aspect-ratio: 4;
display: grid;
animation: d1-0 1s infinite;
}
.dots-1:before,
.dots-1:after {
content: "";
grid-area: 1/1;
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
background:
var(--_g) left,
var(--_g) right;
background-size: 25% 100%;
}
.dots-1:after {
transform: rotate(0) translate(37.5%) rotate(0);
animation: inherit;
animation-name: d1-1;
}
@keyframes d1-0 {
100% {transform:translate(37.5%)}
}
@keyframes d1-1 {
100% {transform:rotate(-.5turn) translate(37.5%) rotate(.5turn)}
}
.dots-2 {
height: 15px;
aspect-ratio: 5;
display: grid;
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
}
.dots-2:before,
.dots-2:after {
content: "";
grid-area: 1/1;
background:
var(--_g) left,
var(--_g) right;
background-size: 20% 100%;
animation: d2 1s infinite;
}
.dots-2:after {
background:
var(--_g) calc(1*100%/3),
var(--_g) calc(2*100%/3);
background-size: 20% 100%;
animation-direction: reverse;
}
@keyframes d2 {
80%,100% {transform:rotate(.5turn)}
}
.dots-3 {
height: 15px;
aspect-ratio: 5;
display: flex;
justify-content: space-between;
}
.dots-3:before,
.dots-3:after {
content: "";
width: calc(140%/3);
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
background:
var(--_g) left,
var(--_g) right;
background-size: calc(300%/7) 100%;
transform-origin: calc(300%/14) 50%;
transform: translate(0) rotate(0);
animation: d3 1s infinite linear;
}
.dots-3:after {
--s:-1;
transform-origin: calc(100% - calc(300%/14)) 50%;
}
@keyframes d3 {
100% {transform: translate(calc(var(--s,1)*(100% - calc(300%/7)))) rotate(calc(var(--s,1)*.5turn))}
}
.dots-4 {
height: 15px;
aspect-ratio: 4;
display: grid;
}
.dots-4:before,
.dots-4:after {
content: "";
grid-area: 1/1;
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
background:
var(--_g) left,
var(--_g) right;
background-size: 25% 100%;
animation: d4 1s infinite;
transform: translate(var(--d,0)) rotate(0);
}
.dots-4:after {
--d: 37.5%;
animation-delay: .5s;
}
@keyframes d4 {
50%,100% {transform: translate(var(--d,0)) rotate(.5turn)}
}
.dots-5 {
height: 15px;
aspect-ratio: 5;
display: grid;
}
.dots-5:before,
.dots-5:after {
content: "";
grid-area: 1/1;
height: inherit;
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
background:
var(--_g) left,
var(--_g) right;
background-size: 15px 100%;
background-repeat: no-repeat;
animation: d5 1s infinite linear;
}
.dots-5:after {
margin-left: auto;
--s:-1;
}
@keyframes d5 {
0% {transform:translateY(calc(var(--s,1)*0px));aspect-ratio: 2.3 }
33% {transform:translateY(calc(var(--s,1)*8px));aspect-ratio: 2.3 }
66% {transform:translateY(calc(var(--s,1)*8px));aspect-ratio: 3.7 }
100% {transform:translateY(calc(var(--s,1)*0px));aspect-ratio: 3.7 }
}
.dots-6 {
height: 15px;
aspect-ratio: 5;
display: grid;
animation: d6-0 2s infinite linear;
}
.dots-6:before,
.dots-6:after {
content: "";
grid-area: 1/1;
height: inherit;
--_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
background:
var(--_g) left,
var(--_g) right;
background-size: 15px 100%;
background-repeat: no-repeat;
animation: d6-1 1s infinite linear;
}
.dots-6:after {
margin-left: auto;
--s:-1;
}
@keyframes d6-0 {
0%,49.99% {transform: scaleY( 1)}
50%,100% {transform: scaleY(-1)}
}
@keyframes d6-1 {
0% {transform:translate(0 ,calc(var(--s,1)*0px));aspect-ratio: 2.3}
33% {transform:translate(0 ,calc(var(--s,1)*8px));aspect-ratio: 2.3}
66% {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*8px));aspect-ratio: 3.7}
100% {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*0px));aspect-ratio: 3.7}
}
/**/
body {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
* {
box-sizing: border-box;
}
309 подписчиков
Спиннеры загрузки на HTML + CSS
25 просмотров • 10 месяцев назад