Spinner

The "wui-spinner" component is used to indicate loading status.

Summary

Loading Spinner component is used to indicate loading status
Size Change size with small prop or use custom CSS or inline styles to change the dimensions as needed. Default size is 28px and with small prop it's 14px
Color Component will inherit text color from parent element i.e. placed inside success button color will be green.
Alignment Spinner can be easily customized with Bootstrap v3 utility classes, custom CSS or inline styles.
Versatility Can be used in different settings i.e. in an input field, in a content-body, in front of a button), etc.

Example

<div class="display--flex justify-content-center">
  <wui-spinner />
</div>

Common combination

wui-spinner meets wui-button

Submit

<div class="display--flex justify-content-center">
  <wui-button variant="success">
    <wui-spinner small class="m-r-5"></wui-spinner>
    Submit
  </wui-button>
</div>

<div class="input-group">
  <div class="wui-form-control-group wui-form-control-group--has-icon">
    <input type="text" id="" name="" value="Value is loading" autocomplete="off" class="wui-form-control" />
  </div>
  <span class="input-group-btn">
    <button type="button" class="wui-btn wui-btn--default wui-btn--outline">
      <wui-spinner small />
    </button>
  </span>
</div>

Unfortunately, the design page you are looking for is not ready yet. But you might want to switch to the implementation tab. There you will find the corresponding Vue component and a description of the different use cases and what to consider when implementing it.
If you have any questions, suggestions or ideas for improvement right now, please feel free to contact us directly.
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com

Stay tuned!

The <wui-spinner> component is built in on top of WuiFaIcon <wui-fa-icon> component that can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component. Their appearance, alignment, and sizing can be easily customized with a few built-in props and/or WuiVue utility classes.

Spinners can be placed just about anywhere, including inside buttons, alerts, etc.

<div class="text-center m-b-30">
  <wui-spinner label="Spinning" />
</div>

<wui-spinner class="m-x-10" />

<wui-button variant="primary" disabled>
  <wui-spinner small class="m-r-5" />
  Button
</wui-button>

Size

Set the prop small to true to make a smaller spinner that can quickly be used within other components.

<div>
  <wui-button variant="primary" disabled>
    <wui-spinner small class="m-r-5" />
    Submit
  </wui-button>
</div>

Or, use custom CSS or inline styles to change the dimensions as needed.

<div>
  <wui-spinner style="font-size: 4rem;" label="Large Spinner" />
</div>

Alignment

Alignment can be easily customized with WuiVue utility classes, custom CSS or inline styles.

Margin

Use margin utility classes like m-r-5 for easy spacing.

<div>
  <wui-button variant="primary" disabled>
    <wui-spinner small class="m-r-5" />
    Button
  </wui-button>
</div>

Placement

Use flexbox, float or text alignment utility classes to place spinners exactly where you need them in any situation.

Flex

Using flex utility classes:

<div>
  <div class="display--flex justify-content-center m-b-20">
    <wui-spinner />
  </div>
</div>

Spinners in buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also pass label prop to place a custom hidden label text inside the spinner for screen reader users.

<div>
  <wui-button variant="primary" disabled>
    <wui-spinner small label="Your request is being processed" class="m-r-5" />
    Loading...
  </wui-button>
</div>

Spinners in inputs

Use spinners within inputs to indicate an action is currently processing or taking place. You may also pass label prop to place a custom hidden label text inside the spinner for screen reader users.

<wui-input-group prepend="Username" class="m-t-15">
  <wui-form-input></wui-form-input>
  <wui-input-group-append>
    <wui-button variant="primary" disabled>
      <wui-spinner small class="m-r-5" />
      Button
    </wui-button>
  </wui-input-group-append>
</wui-input-group>

Spinner accessibility

Place a hidden label text inside the spinner for screen reader users, via the label prop as mentioned above in "Spinners in buttons" example. The content will be placed inside the spinner wrapped in a <span> element that has the class sr-only, which will make the label available to screen reader users.

For accessibility purposes, each spinner will automatically have a role="status" attribute, and you can also change role value from role prop.

The animation effect of this component is dependent on the prefers-reduced-motion media query.

Component reference

`<wui-spinner>`

<wui-spinner> Properties

Properties

Property	Type	Default	Description
`label`	`String`	`Loading...`	Pass `label` prop to place a custom hidden label text inside the spinner for screen reader users
`role`	`String`	`status`	Each spinner will automatically have a `role="status"` attribute
`small`	`Boolean`	`false`	Use `small` prop to make a smaller spinner that can quickly be used within other components
`tag`	`String`	`span`	Change base element HTML tag for spinner component

From WUI and

with

WUI is wescale’s design system