body {
background: black;
height: 100vh;
}
/* Стили для блоков с классом loading */
.loading {
position: relative;
overflow: hidden; /* Обрезаем все, что выходит за пределы блока */
}
.loading::before {
--off: 0%;
content: '';
position: absolute;
top: 0;
left: 0%; /* Начинаем за пределами блока слева */
width: 100%; /* Задаем ширину равной ширине блока */
height: 100%;
background: linear-gradient(-45deg,
rgba(255, 255, 255, 0) calc( var(--off) + 0% ),
rgba(255, 255, 255, 0) calc( var(--off) + 5% ),
rgba(240, 240, 240, 0.3) calc( var(--off) + 50% ),
rgba(255, 255, 255, 0) calc( var(--off) + 95% ),
rgba(255, 255, 255, 0) calc( var(--off) + 100% )
); /* Прозрачный градиент */
animation: shine 5s linear infinite; /* Анимация для псевдоэлемента */
z-index: 1; /* Поднимаем выше основного контента блока */
}
/* Небольшие изменения в анимации */
@keyframes shine {
0% { --off: 100.0%; }
0.8% { --off: 98.4%; }
1.6% { --off: 96.8%; }
2.4% { --off: 95.2%; }
3.2% { --off: 93.6%; }
4% { --off: 92.0%; }
4.8% { --off: 90.4%; }
5.6% { --off: 88.8%; }
6.4% { --off: 87.2%; }
7.2% { --off: 85.6%; }
8% { --off: 84.0%; }
8.8% { --off: 82.4%; }
9.6% { --off: 80.8%; }
10.4% { --off: 79.2%; }
11.2% { --off: 77.6%; }
12% { --off: 76.0%; }
12.8% { --off: 74.4%; }
13.6% { --off: 72.8%; }
14.4% { --off: 71.2%; }
15.2% { --off: 69.6%; }
16% { --off: 68.0%; }
16.8% { --off: 66.4%; }
17.6% { --off: 64.8%; }
18.4% { --off: 63.2%; }
19.2% { --off: 61.6%; }
20% { --off: 60.0%; }
20.8% { --off: 58.4%; }
21.6% { --off: 56.8%; }
22.4% { --off: 55.2%; }
23.2% { --off: 53.6%; }
24% { --off: 52.0%; }
24.8% { --off: 50.4%; }
25.6% { --off: 48.8%; }
26.4% { --off: 47.2%; }
27.2% { --off: 45.6%; }
28% { --off: 44.0%; }
28.8% { --off: 42.4%; }
29.6% { --off: 40.8%; }
30.4% { --off: 39.2%; }
31.2% { --off: 37.6%; }
32% { --off: 36.0%; }
32.8% { --off: 34.4%; }
33.6% { --off: 32.8%; }
34.4% { --off: 31.2%; }
35.2% { --off: 29.6%; }
36% { --off: 28.0%; }
36.8% { --off: 26.4%; }
37.6% { --off: 24.8%; }
38.4% { --off: 23.2%; }
39.2% { --off: 21.6%; }
40% { --off: 20.0%; }
40.8% { --off: 18.4%; }
41.6% { --off: 16.8%; }
42.4% { --off: 15.2%; }
43.2% { --off: 13.6%; }
44% { --off: 12.0%; }
44.8% { --off: 10.4%; }
45.6% { --off: 8.8%; }
46.4% { --off: 7.2%; }
47.2% { --off: 5.6%; }
48% { --off: 4.0%; }
48.8% { --off: 2.4%; }
49.6% { --off: 0.8%; }
50.4% { --off: -0.8%; }
51.2% { --off: -2.4%; }
52% { --off: -4.0%; }
52.8% { --off: -5.6%; }
53.6% { --off: -7.2%; }
54.4% { --off: -8.8%; }
55.2% { --off: -10.4%; }
56% { --off: -12.0%; }
56.8% { --off: -13.6%; }
57.6% { --off: -15.2%; }
58.4% { --off: -16.8%; }
59.2% { --off: -18.4%; }
60% { --off: -20.0%; }
60.8% { --off: -21.6%; }
61.6% { --off: -23.2%; }
62.4% { --off: -24.8%; }
63.2% { --off: -26.4%; }
64% { --off: -28.0%; }
64.8% { --off: -29.6%; }
65.6% { --off: -31.2%; }
66.4% { --off: -32.8%; }
67.2% { --off: -34.4%; }
68% { --off: -36.0%; }
68.8% { --off: -37.6%; }
69.6% { --off: -39.2%; }
70.4% { --off: -40.8%; }
71.2% { --off: -42.4%; }
72% { --off: -44.0%; }
72.8% { --off: -45.6%; }
73.6% { --off: -47.2%; }
74.4% { --off: -48.8%; }
75.2% { --off: -50.4%; }
76% { --off: -52.0%; }
76.8% { --off: -53.6%; }
77.6% { --off: -55.2%; }
78.4% { --off: -56.8%; }
79.2% { --off: -58.4%; }
80% { --off: -60.0%; }
80.8% { --off: -61.6%; }
81.6% { --off: -63.2%; }
82.4% { --off: -64.8%; }
83.2% { --off: -66.4%; }
84% { --off: -68.0%; }
84.8% { --off: -69.6%; }
85.6% { --off: -71.2%; }
86.4% { --off: -72.8%; }
87.2% { --off: -74.4%; }
88% { --off: -76.0%; }
88.8% { --off: -77.6%; }
89.6% { --off: -79.2%; }
90.4% { --off: -80.8%; }
91.2% { --off: -82.4%; }
92% { --off: -84.0%; }
92.8% { --off: -85.6%; }
93.6% { --off: -87.2%; }
94.4% { --off: -88.8%; }
95.2% { --off: -90.4%; }
96% { --off: -92.0%; }
96.8% { --off: -93.6%; }
97.6% { --off: -95.2%; }
98.4% { --off: -96.8%; }
99.2% { --off: -98.4%; }
100% { --off: 100%; }
}