public-ui-kolibri

.loader { border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; width: 48px; height: 48px; animation: pulse 1s linear infinite; border: 5px solid #333; } .loader:after { transform: translate(-50%, -50%); border-radius: 50%; display: inline-block; position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 48px; height: 48px; content: ''; animation: scaleUp 1s linear infinite; border: 5px solid #f00; } @keyframes scaleUp { 0% { transform: translate(-50%, -50%) scale(0); } 60%, 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes pulse { 0%, 60%, 100% { transform: scale(1); } 80% { transform: scale(1.2); } } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */ @media (prefers-reduced-motion) { .loader, .loader:after { animation-duration: 2s; } }