loading-spinner:
[ This description is mirrored from README.md at github.com/BrightspaceUI/loading-spinner on 2019-05-10 ]
Looking for SASS-based d2l-loading-spinner? It’s over here.
d2l-loading-spinner
Polymer-based web component loading spinner.
For further information on this and other components, refer to The Brightspace UI Guide.
Installation
d2l-loading-spinner can be installed from Bower:
bower install d2l-loading-spinner
Usage
Include the webcomponents.js “lite” polyfill (for browsers who don’t natively support web components), then import d2l-loading-spinner.html:
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-loading-spinner/d2l-loading-spinner.html">
</head>
<d2l-loading-spinner></d2l-loading-spinner>
Size
The size (default 50px) can be adjusted using the size attribute:
<d2l-loading-spinner size="100"></d2l-loading-spinner>
Or by setting the --d2l-loading-spinner-size CSS property:
<custom-style>
.huge-spinner {
--d2l-loading-spinner-size: 400px;
}
</custom-style>
<d2l-loading-spinner class="huge-spinner"></d2l-loading-spinner>
Color
While not recommended, the default color (blue) can be set using the color attribute:
<d2l-loading-spinner color="red"></d2l-loading-spinner>
Or by setting the --d2l-loading-spinner-color CSS property:
<custom-style>
.red-spinner {
--d2l-loading-spinner-color: red;
}
</custom-style>
<d2l-loading-spinner class="red-spinner"></d2l-loading-spinner>
Developing, Testing and Contributing
After cloning the repo, run npm install to install dependencies.
If you don’t have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
Versioning
Commits and PR merges to master will automatically do a minor version bump which will:
- Update the version in
package.json - Add a tag matching the new version
- Create a github release matching the new version
By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.