Добавление индикатора загрузки в блок Т228

<!-- Добавление индикатора загрузки в блок Т228 в Tilda -->
<style>
:root {
    --loader-duration: 1s; /*Длительность растворения*/
    --loader-delay: 3s; /*Задержка*/
}
/*Размер*/
.t-body:before {
    width: 50px;
    height: 50px;
}
@media (max-width:640px){
.t-body:before {
    /*Размер в мобильном*/
    width: 30px;
    height: 30px;
}
}
.t-records_animated {
    transition-duration: var(--loader-duration);
    transition-delay: var(--loader-delay);
}
.t-body:before {
    content: "";
    /*Ссылка на картинку*/
    background-image: url(https://www.inkedxfiles.site/contenthub/loadericon2.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>