Polymère - Spinner à papier

Paper-spinner est un élément spinner, qui indique le chargement d'un fichier particulier ou d'une image prenant en charge plusieurs couleurs.

Vous pouvez utiliser cet élément dans votre application, en exécutant la commande suivante pour l'installer dans votre répertoire de projet.

bower install --save PolymerElements/paper-spinner

Exemple

L'exemple suivant spécifie l'utilisation de l'élément spinner de papier dans Polymer.js. Créez un fichier index.html et ajoutez-y le code suivant.

<!doctype html>
<html>
   <head>
      <link rel = 'import' href = 'my-app.html'>
   </head>
   
   <body>    
      <my-app></my-app>
   </body>
</html>

Maintenant, ouvrez le fichier my-app.html et ajoutez-y le code suivant.

<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>

Production

Pour exécuter l'application, accédez au répertoire de projet créé et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.