.spinner{display:inline-block;--spinner-size: 1em;--spinner-duration: 1s;--spinner-color: currentColor;font-size:var(--spinner-size);color:var(--spinner-color)}.spinner:before{content:"⣾";display:inline-block;line-height:1;font-variant-ligatures:none;animation:braille-spin var(--spinner-duration) steps(8) infinite;animation-play-state:running}.spinner.paused:before{animation-play-state:paused}@keyframes braille-spin{0%{content:"⣾"}12.5%{content:"⣽"}25%{content:"⣻"}37.5%{content:"⢿"}50%{content:"⡿"}62.5%{content:"⣟"}75%{content:"⣯"}87.5%{content:"⣷"}to{content:"⣾"}}.spinner[data-variant=line]{display:inline-block;width:var(--spinner-size, 50px);height:var(--spinner-size, 50px);border:calc(var(--spinner-size, 50px) / 10) solid #f3f3f3;border-top-color:var(--spinner-color, #3498db);border-radius:50%;box-sizing:border-box}.spinner[data-variant=line]:before{content:"";width:100%;height:100%;display:block;animation:spin var(--spinner-duration, 1s) linear infinite;border-radius:inherit}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner:before,.spinner[data-variant=line]:before{animation:none!important}}