Skip to content

Latest commit

 

History

History
53 lines (39 loc) · 1.91 KB

README.md

File metadata and controls

53 lines (39 loc) · 1.91 KB
Raw

Loading Spinners

A loading spinner indicates that something is happening and we don't know how long it will take.

<script type="module">
  import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';
</script>

<d2l-loading-spinner></d2l-loading-spinner>

Best Practices

  • Use a loading spinner when the user initiates an action with indeterminate length, and it's expected to take longer than a couple seconds
  • Adjust the size proportionally to the area that is being loaded; small for a widget or dropdown, larger for a large list or an entire page
  • For a better user experience, use a Skeleton loader instead when possible
  • Don't use a loading spinner it if the user's action is nearly instant, as it may appear to flash or flicker on the screen before disappearing
  • Avoid using multiple spinners on one screen, as this can overwhelm users and create anxiety - see Skeleton loaders instead

Loading Spinner [d2l-loading-spinner]

<script type="module">
  import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';
</script>

<d2l-loading-spinner></d2l-loading-spinner>

Properties

Property Type Description
color String Color of the animated bar (default is --d2l-color-celestine)
size Number, default: 50 Height and width (px) of the spinner

Future Improvements

  • Ability to "freeze" the spinner at a specified frame to make vdiff testing easier

Looking for an enhancement not listed here? Create a GitHub issue!