3.0.0 • Published 5 years ago

@granite-elements/granite-spinner v3.0.0

Weekly downloads
24
License
MIT
Repository
github
Last release
5 years ago

Published on Vaadin  Directory Stars on vaadin.com/directory

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

Attributes

AttributeTypeDefaultDescription
activeBooleanfalseWhen true, the spinner is shown
hoverBooleanfalseWhen true, the spinner hovers over the underlaying content
sizeNumber100pxThe size of the spinner
colorString#28b6d8The color of the moving part of the spinner
lineWidthString1.5emThe spinning element line width
containerHeightNumber150pxThe 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