Web Component Loaders/Spinners in CSS3 [Web Loader] using Polymer.
Install the component using Bower:
$ bower install web-loader --saveOr download as ZIP.
- Import Web Components' polyfill:
<script src="bower_components/platform/platform.js"></script>- Import Custom Element:
<link rel="import" href="bower_components/web-loader/src/web-loader.html">- Start using it!
<web-loader></web-loader>| Attribute | Options | Default | Description |
|---|---|---|---|
type |
circle, dot, clock |
circle |
The type of loader |
display |
block, none |
block |
The visibility of loader |
styleOverride |
web-loader, anything-else |
web-loader |
Specifies the reference ID of the core-style to use for overriding default stylings |
Styling is done through the use of a core-style element. All you have to do is declare a core-style element in your site with an ID that matches the styleOverride property of the web-loader component (defaults to web-loader).
For example:
<core-style id="web-loader">
.circle{
border: 3px solid #333333;
}
.circle:after{
background-color: #333333;
}
.clock{
border: 3px solid #333333;
}
.clock:after{
background-color: #333333;
}
.clock:before{
background-color: #333333;
}
.dot{
background-color: #333333;
}
.dot:before{
background-color: #333333;
}
.dot:after{
background-color: #333333;
}
</core-style> |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
- 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
Check Release list.
MIT License © Magno Valdetaro