spinners
set of spinners
<spinner-element>
Description.
varied set of spinners, you can choose any of the 10 types and additional you can edit the color, the time of activity and visibility.
Use visible
to show the spinner:
<spinner-element visible></spinner-element>
Installation
npm install spinner-element"@0.0.4" --save
Polymer Element to display a spinner
the polymer element shows a spinner, which we can select any of the 10 types, (default, bars, bubbles, circles, ripple, dots, folding, cube, bounce, infinity) but the type of spinner is specified, it will show the type 'default ', to activate it requires the' visible 'property
optionally we can set the activity time in milliseconds, if it is not set by default it is infinite
<spinner-element
visible
tipo="bars"
duration="3000"
></spinner-element>
Styling
The following custom properties are available for styling
Custom property | Description | Default |
---|---|---|
--background-color-spinner | The spinner-element background-color | #b9b5b524 |
--background-border-infinity | background-color only for infinite spinner | #5d535314 |
--background-center-infinity | background-color only for infinite spinner | #ffffff00 |
Usage
In an html file
<html>
<head>
<script type="module">
import '.././spinner/spinner-element.js';
</script>
<custom-style>
<style is="custom-style">
#spinner {
--background-color-spinner: #f0f000;
}
</style>
</custom-style>
</head>
<body>
<spinner-element id="spinner" visible tipo="bars"></spinner-element>
</body>
</html>
In a Polymer 3 element
import {PolymerElement, html} from '@polymer/polymer';
import '.././spinner/spinner-element.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<spinner-element visible tipo="bubbles"></spinner-element>
`;
}
}
customElements.define('sample-element', SampleElement);
Credits
This repository is based on the CSS code of https://github.com/tobiasahlin/SpinKit You can also see a sample of the spinners in action http://tobiasahlin.com/spinkit/
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/iron-meta#^3.0.1
- @polymer/paper-item#^3.0.1
- @polymer/paper-listbox#^3.0.1
- @polymer/polymer#^3.0.0
- Released
- 2019-03-25
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
spinners - Vaadin Add-on Directory
set of spinnersView on NPM
spinners version 0.0.1
### Dependencies
* @polymer/iron-meta#^3.0.1
* @polymer/polymer#^3.0.0
spinners version 0.0.2
### Dependencies
* @polymer/iron-meta#^3.0.1
* @polymer/polymer#^3.0.0
spinners version 0.0.3
### Dependencies
* @polymer/iron-meta#^3.0.1
* @polymer/polymer#^3.0.0
spinners version 0.0.4
### Dependencies
* @polymer/iron-meta#^3.0.1
* @polymer/paper-item#^3.0.1
* @polymer/paper-listbox#^3.0.1
* @polymer/polymer#^3.0.0