Polymère - Progression du papier

Les barres de progression sont utilisées pour déterminer le pourcentage de tâche achevée. Cela donne une brève idée à l'utilisateur du temps nécessaire pour terminer la tâche. La progression secondaire est également disponible pour afficher la progression intermédiaire. Pour obtenir la progression du papier dans votre répertoire en état de fonctionnement, vous devez exécuter la commande suivante dans l'invite de commande.

bower install --save PolymerElements/paper-progress

Exemple

Votre fichier index.html doit ressembler à ce qui suit -

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

Votre fichier my-app.html doit ressembler à ce qui suit -

<link rel = 'import' href = 'bower_components/polymer/polymer.html'>
<link rel = "import" href = "bower_components/paper-progress/paper-progress.html">

<dom-module id = 'my-app'>
   <template>
      <style>
         paper-progress {
            display: block;
            width: 30%;
            margin: 20px 0;
         }
      </style>
      
      <h3>Paper-Progress Example</h3>
      <p>70% completed</p>
      <paper-progress value = "70"></paper-progress>
      <p>45% completed</p>
      <paper-progress value = "45"></paper-progress>
      <p>20% completed</p>
      <paper-progress value = "20"></paper-progress>
   </template>
   
   <script>
      Polymer ({
         is: 'my-app', ready: function() {
            this.async(function() {         
            });
         }
      });
   </script>
</dom-module>

Production

Actualisez le serveur Polymer et ce qui suit sera la sortie.