loading-spinner
Polymer-based web component for a 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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- d2l-colors#^3.1.2
- polymer#1.9.3 - 2
- Released
- 2018-02-12
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 5.0.5
- Browser
- Browser Independent
loading-spinner - Vaadin Add-on Directory
Polymer-based web component for a loading spinnerGitHub Homepage
Documentation
Issue tracker
Online Demo
loading-spinner version 0.1.0
### Dependencies
loading-spinner version 0.1.1
### Dependencies
loading-spinner version 1.0.0
### Dependencies
loading-spinner version 2.0.0
### Dependencies
* polymer#^1.4.0
* iron-iconset-svg#~1.0.9
* iron-icon#~1.0.8
loading-spinner version 3.0.0
### Dependencies
* polymer#^1.5.0
* iron-icon#^1.0.0
* iron-iconset-svg#^1.0.0
* d2l-colors#^2.0.0
loading-spinner version 3.0.1
### Dependencies
* polymer#^1.5.0
* iron-icon#^1.0.0
* iron-iconset-svg#^1.0.0
* d2l-colors#^2.0.0
loading-spinner version 4.0.0
### Dependencies
* polymer#^1.5.0
* iron-icon#^1.0.0
* iron-iconset-svg#^1.0.0
* d2l-colors#^2.0.0
loading-spinner version 4.0.1
### Dependencies
* d2l-colors#^2.2.3
* iron-icon#^1.0.0
* iron-iconset-svg#^1.0.0
* polymer#^1.7.0
loading-spinner version 4.0.2
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^2.16.1
* iron-iconset-svg#^1.0.0
* polymer#^1.7.0
loading-spinner version 5.0.0
### Dependencies
* d2l-colors#^2.2.3
* d2l-icons#^3.0.0
* iron-iconset-svg#^1.0.0
* polymer#^1.7.0
loading-spinner version 5.0.1
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.1
loading-spinner version 5.0.2
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.1
loading-spinner version 5.0.3
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.1
loading-spinner version 5.0.4
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.1
loading-spinner version 5.0.5
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.1
loading-spinner version 6.0.0
### Dependencies
* d2l-colors#^2.4.0 || ^3.1.0
* polymer#Polymer/polymer#1 - 2
loading-spinner version 6.0.1
### Dependencies
* d2l-colors#^3.1.2
* polymer#1.9.3 - 2
loading-spinner version 6.0.2
### Dependencies
* d2l-colors#^3.1.2
* polymer#1.9.3 - 2
loading-spinner version 6.0.3
### Dependencies
* d2l-colors#^3.1.2
* polymer#1.9.3 - 2