third_party/polymer/components-chromium/paper-progress/paper-progress.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><!--
   9 The progress bars are for situations where the percentage completed can be
  10 determined. They give users a quick sense of how much longer an operation
  11 will take.
  12
  13 Example:
  14
  15     <paper-progress value="10"></paper-progress>
  16
  17 There is also a secondary progress which is useful for displaying intermediate
  18 progress, such as the buffer level during a streaming playback progress bar.
  19
  20 Example:
  21
  22     <paper-progress value="10" secondaryProgesss="30"></paper-progress>
  23
  24 Styling progress bar:
  25
  26 To change the active progress bar color:
  27
  28     paper-progress::shadow #activeProgress {
  29       background-color: #e91e63;
  30     }
  31
  32 To change the secondary progress bar color:
  33
  34     paper-progress::shadow #secondaryProgress {
  35       background-color: #f8bbd0;
  36     }
  37
  38 To change the progress bar background color:
  39
  40     paper-progress::shadow #progressContainer {
  41       background-color: #64ffda;
  42     }
  43
  44 @group Paper Elements
  45 @element paper-progress
  46 @extends core-range
  47 @homepage github.io
  48 --><html><head><link rel="import" href="../core-range/core-range.html">
  49
  50 </head><body><polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate" assetpath="">
  51
  52   <template>
  53
  54     <link rel="stylesheet" href="paper-progress.css">
  55
  56     <div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}">
  57
  58       <div id="secondaryProgress" fit=""></div>
  59       <div id="activeProgress" fit=""></div>
  60
  61     </div>
  62
  63   </template>
  64
  65
  66
  67 </polymer-element>
  68 <script src="paper-progress-extracted.js"></script></body></html>