Feedback

Spinner

Aro giratorio para una espera de duración desconocida. Cuando el avance se puede medir está la barra de progreso.

Uso

Es una clase: spinner se aplica sobre el elemento que ocupa el lugar de lo que se espera. La variante small lo reduce.


<span class="spinner"></span>
<span class="spinner small"></span>

Dentro de otra pieza

El tamaño, el grosor, los dos colores y la duración son tokens, así que la pieza que coloca un spinner puede ajustarlos redefiniéndolos.

Tokens semánticos

TokenQué es
--spinner--size--ringEl ancho y el alto del anillo.
--spinner--border-width--trackEl grosor del anillo.
--spinner--border-style--trackEl tipo (border-style) del anillo.
--spinner--border--trackEl color de la parte fija del anillo.
--spinner--color--markEl color del segmento del anillo que gira.
--spinner--duration--spinLa duración de una vuelta completa del anillo.