.container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: var(--Default-BgLight); pointer-events: none; } .text { margin-top: 20px; font-size: 13px; text-align: center; color: white; } .spinner { position: relative; width: 100px; height: 100px; border-radius: 100px; background-color: var(--Default-BgLight); } .spinnerBar { position: absolute; width: 4px; /* Толщина палочек */ height: 16px; /* Длина палочек */ background: linear-gradient(to bottom, white, grey); border-radius: 4px; top: 25px; /* Отступ от центра (радиус внутреннего круга) */ left: 48%; transform-origin: 48% 25px; /* Сдвиг оси вращения */ animation: spinner-fade 1.2s linear infinite; } .spinnerBar:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .spinnerBar:nth-child(2) { transform: rotate(45deg); animation-delay: -1s; } .spinnerBar:nth-child(3) { transform: rotate(90deg); animation-delay: -0.9s; } .spinnerBar:nth-child(4) { transform: rotate(135deg); animation-delay: -0.8s; } .spinnerBar:nth-child(5) { transform: rotate(180deg); animation-delay: -0.7s; } .spinnerBar:nth-child(6) { transform: rotate(225deg); animation-delay: -0.6s; } .spinnerBar:nth-child(7) { transform: rotate(270deg); animation-delay: -0.5s; } .spinnerBar:nth-child(8) { transform: rotate(315deg); animation-delay: -0.4s; } @keyframes spinner-fade { 0% { opacity: 1; } 100% { opacity: 0.3; } }