Loading Spinner on GitHub

Loading Spinner

The loading-spinner component wraps up all the elements and styles needed.

To create a loading-spinner, use the d2l-loading-spinner element.

Example (html)
<d2l-loading-spinner></d2l-loading-spinner>

Custom Color or Size

The d2l-loading-spinner style can be customized by specifying a color and/or size attributes on the element. Alternatively, the color and size can be customized using the --d2l-loading-spinner-color and/or --d2l-loading-spinner-size CSS properties.

Example (html)
<d2l-loading-spinner color="#e57231" size="30"></d2l-loading-spinner>
<d2l-loading-spinner color="#e57231" size="50"></d2l-loading-spinner>
<d2l-loading-spinner color="#e57231" size="100"></d2l-loading-spinner>

Developing with Loading Spinners

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-loading-spinner

Then import the components you need:

Example (html)
<!-- for a loading spinner -->
<link
  rel="import"
  href="bower_components/d2l-loading-spinner/d2l-loading-spinner.html">

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/loading-spinner" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.