<web-loader>

Web Component Loaders/Spinners in CSS3 [Web Loader] using Polymer.

Demo

Check it live.

Install

Install the component using Bower:

$ bower install web-loader --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill:

<script src="bower_components/platform/platform.js"></script>

2. Import Custom Element:

<link rel="import" href="bower_components/web-loader/src/web-loader.html">

3. Start using it!

<web-loader></web-loader>

Options

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

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>

Browser Support

IE 10+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

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

History

Check Release list.

License

MIT License © Magno Valdetaro