@granite-elements/granite-spinner

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

1. Fork the granite-spinner repository and clone it locally.

2. Make sure you have npm and the Polymer CLI installed.

3. When in the granite-spinner directory, run npm install to install dependencies.

4. Serve the project using Polyumer CLI:

   polymer serve --npm

5. Open the demo in the browser

   • http://127.0.0.1:8080/components/@greanite-elements/granite-spinner/demo

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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License