Polímero - Progreso del papel

Las barras de progreso se utilizan para determinar el porcentaje de tarea completada. Le da una breve idea al usuario sobre cuánto tiempo se necesitará para completar la tarea. El progreso secundario también está disponible para mostrar el progreso intermedio. Para que el progreso del papel en su directorio funcione correctamente, debe ejecutar el siguiente comando en el símbolo del sistema.

bower install --save PolymerElements/paper-progress

Ejemplo

Su archivo index.html debería verse así:

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

Su archivo my-app.html debería tener el siguiente aspecto:

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

Salida

Actualice el servidor de Polymer y lo siguiente será el resultado.

↰ Previous page