Skip to main content

Spinners

Overview#

Indicate the loading state of a component or page with spinners.

Examples#

Border spinner#

Use the border spinners for a lightweight loading indicator.


<uxf-spinner  role="status">    <span class="visually-hidden">Loading...</span></uxf-spinner>

Colors#

The border spinner uses currentColor for its border-color, meaning you can customize the color. You can use any of our text color utilities on the standard spinner.


<uxf-spinner  role="status" variant="primary">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="secondary">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="success">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="danger">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="warning">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="info">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="light">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  role="status" variant="dark">    <span class="visually-hidden">Loading...</span></uxf-spinner>

Growing spinner#

If you don’t fancy a border spinner, switch to the growing spinner. While it doesn't technically spin, it does repeatedly grow!



<uxf-spinner grow="true" role="status">    <span class="visually-hidden">Loading...</span></uxf-spinner><br/> <br/><uxf-spinner grow="true" role="status" variant="primary">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="secondary">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="success">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="danger">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="warning">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="info">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="light">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="dark">    <span class="visually-hidden" >Loading...</span></uxf-spinner>

<uxf-spinner grow="true" role="status">    <span class="visually-hidden">Loading...</span></uxf-spinner><br/> <br/><uxf-spinner grow="true" role="status" variant="primary">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="secondary">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="success">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="danger">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="warning">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="info">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="light">    <span class="visually-hidden" >Loading...</span></uxf-spinner><uxf-spinner grow="true" role="status" variant="dark">    <span class="visually-hidden" >Loading...</span></uxf-spinner>

Size#

Add property small to make a smaller spinner that can quickly be used within other components.


<uxf-spinner  role="status" small="true">    <span class="visually-hidden">Loading...</span></uxf-spinner><uxf-spinner  grow="true" role="status" small="true">    <span class="visually-hidden">Loading...</span></uxf-spinner>