granite-spinner
Pure CSS spinner Polymer web component
granite-spinner
A simple, lightweight spinner web component.
Built on lit-element
The old Polymer 2.x-1.x version is available on the
polymer-1.x
branch.
Doc & demo
https://lostinbrittany.github.io/granite-spinner
Usage example
<granite-spinner
color="#ff4081"
line-width="2em"
active></granite-spinner>
Install
Install the component using npm:
$ npm i @granite-elements/granite-spinner
Once installed, import it in your application:
import '@granite-elements/granite-spinner/granite-spinner.js';
Running demos and tests in browser
Fork the
granite-spinner
repository and clone it locally.Make sure you have npm and the Polymer CLI installed.
When in the
granite-spinner
directory, runnpm install
to install dependencies.Serve the project using Polyumer CLI:
polymer serve --npm
Open the demo in the browser
Attributes
Attribute | Type | Default | Description |
---|---|---|---|
active |
Boolean | false | When true, the spinner is shown |
hover |
Boolean | false | When true, the spinner hovers over the underlaying content |
size |
Number | 100px |
The size of the spinner |
color |
String | #28b6d8 |
The color of the moving part of the spinner |
lineWidth |
String | 1.5em |
The spinning element line width |
containerHeight |
Number | 150px |
The size of the spinner container |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
License
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
- @polymer/lit-element#^0.6.2
- @polymer/polymer#^3.0.0
- Released
- 2018-11-05
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Polymer 2.0+ in 2.1.0
- Polymer 1.0+ in 2.0.1
- Browser
- Browser Independent