.loader { --color-1: #fff; --color-2: #fff2; --size: 1px; display: inline-block; width: calc(16 * var(--size)); height: calc(16 * var(--size)); border-radius: 50%; background-color: var(--color-1); box-shadow: calc(32 * var(--size)) 0 var(--color-1), calc(-32 * var(--size)) 0 var(--color-1); position: relative; animation: site-loader-flash .5s ease-out infinite alternate; }
.site-button-spinner { --color-1: currentColor; --color-2: color-mix(in srgb, currentColor 15%, transparent); --size: .5px; margin-inline: 16px; vertical-align: middle; }
[data-site-busy="true"] { cursor: wait !important; opacity: .8; pointer-events: none; }
@keyframes site-loader-flash { 0% { background-color: var(--color-2); box-shadow: calc(32 * var(--size)) 0 var(--color-2), calc(-32 * var(--size)) 0 var(--color-1); } 50% { background-color: var(--color-1); box-shadow: calc(32 * var(--size)) 0 var(--color-2), calc(-32 * var(--size)) 0 var(--color-2); } 100% { background-color: var(--color-2); box-shadow: calc(32 * var(--size)) 0 var(--color-1), calc(-32 * var(--size)) 0 var(--color-2); } }
@media (prefers-reduced-motion: reduce) { .loader { animation-duration: 1.5s; } }