.spinner-border,.spinner-grow{ 
    color: #f4f4f4;
    display:inline-block;
    width:var(--bs-spinner-width);
    height:var(--bs-spinner-height);
    vertical-align:var(--bs-spinner-vertical-align);
    border-radius:50%;
    animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)
}

@keyframes spinner-border{
    to{transform:rotate(360deg)}
}

.spinner-border{
    --bs-spinner-width:2rem;
    --bs-spinner-height:2rem;
    --bs-spinner-vertical-align:-0.125em;
    --bs-spinner-border-width:0.25em;
    --bs-spinner-animation-speed:0.75s;
    --bs-spinner-animation-name:spinner-border;
    border:var(--bs-spinner-border-width) solid currentcolor;
    border-right-color:transparent
}

.spinner-border-sm{
    --bs-spinner-width:1rem;
    --bs-spinner-height:1rem;
    --bs-spinner-border-width:0.2em
}

@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}

.spinner-grow{
    --bs-spinner-width:2rem;
    --bs-spinner-height:2rem;
    --bs-spinner-vertical-align:-0.125em;
    --bs-spinner-animation-speed:0.75s;
    --bs-spinner-animation-name:spinner-grow;
    background-color:currentcolor;
    opacity:0
}

.spinner-grow-sm{
    --bs-spinner-width:1rem;
    --bs-spinner-height:1rem
}

@media (prefers-reduced-motion:reduce){
    .spinner-border,
    .spinner-grow{--bs-spinner-animation-speed:1.5s}
}