- Polymer Tutorial
- Polymer - Home
- Polymer - Overview
- Polymer - Installation
- Polymer - Elements
- Polymer - Custom Elements
- Polymer - Shadow DOM and Styling
- Polymer - Events
- Polymer - Data System
- Polymer Useful Resources
- Polymer - Quick Guide
- Polymer - Useful Resources
- Polymer - Discussion
Polymer - Paper Spinner
Paper-spinner is a spinner element, which indicates the loading of a particular file or an image with supporting multiple colors.
You can use this element in your application, by running the following command to install it in your project directory.
bower install --save PolymerElements/paper-spinner
Example
The following example specifies the use of paper-spinner element in Polymer.js. Create an index.html file and add the following code in it.
<!doctype html> <html> <head> <link rel = 'import' href = 'my-app.html'> </head> <body> <my-app></my-app> </body> </html>
Now, open the my-app.html file and include the following code in it.
<link rel = 'import' href = 'bower_components/polymer/polymer.html'> <link rel = "import" href = "bower_components/paper-spinner/paper-spinner.html"> <link rel = "import" href = "bower_components/paper-spinner/paper-spinner-lite.html"> <dom-module id = 'my-app'> <template> <h3>Paper-Spinner Example</h3> <p>Tutorialspoint loading... <paper-spinner-lite active class = "orange"></paper-spinner-lite></p> </template> <script> Polymer ({ is: 'my-app', ready: function() { this.async(function() { }); } }); </script> </dom-module>
Output
To run the application, navigate to the created project directory and run the following command.
polymer serve
Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.
polymer_elements.htm
Advertisements