<style>
:root {
--loader-duration: 1s; /*Длительность растворения*/
--loader-delay: 3s; /*Задержка*/
}
/*Размер*/
.t-body:before {
width: 450px;
height: 450px;
}
@media (max-width:640px){
.t-body:before {
/*Размер в мобильном*/
width: 320px;
height: 320px;
}
}
.t-records_animated {
transition-duration: var(--loader-duration);
transition-delay: var(--loader-delay);
}
.t-body:before {
content: "";
/*Ссылка на картинку*/
background-image: url(https://static.tildacdn.com/tild3263-3438-4035-b461-663363663736/85c970700738855b9763.gif);
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 399;
pointer-events: none;
opacity: 1;
animation: fade var(--loader-duration) calc( var(--loader-delay) - 0.5s ) ease-in-out forwards;
}
@keyframes fade {
from {opacity: 1}
to {opacity: 0}
}
</style>