Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-progress/paper-progress.html"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<my-example></my-example>
  
  <dom-module id="my-example">
    
    <style>
      paper-progress {
        display: block;
        width: 90%;
        margin: 0 0 20px 0;
      }
       paper-progress.green {
        --paper-progress-active-color: var(--paper-light-green-500);
        --paper-progress-secondary-color: var(--paper-light-green-100);
      }
       paper-progress.red {
        --paper-progress-active-color: var(--paper-red-500);
        --paper-progress-secondary-color: var(--paper-red-100);
      }
       paper-progress.orange {
        --paper-progress-active-color: var(--paper-orange-500);
        --paper-progress-secondary-color: var(--paper-orange-100);
      }
    </style>
    
    <template>
      <span>With the binding class</span>
      <paper-progress value="{{dificulty}}" max="10" class$="{{_selectClass(dificulty)}}"></paper-progress>
      _selectClass return: <span>{{_selectClass(dificulty)}}</span></br></br>
      <span>WithOut the $</span>
      <paper-progress value="{{dificulty}}" max="10" class="{{_selectClass(dificulty)}}"></paper-progress>
      <span>WithOut the binding and '$'</span>
      <paper-progress value="{{dificulty}}" max="10" class="orange"></paper-progress>
    </template>
    
  </dom-module>
  
  <script>    
    Polymer({
      is: 'my-example',
      
      properties: {
          dificulty: {
            type: String,
            value: 5
          }
      },        
      
      _selectClass: function(dificulty) {
          if(0<= dificulty && dificulty<=4){
            return 'green';
          } else if (4< dificulty && dificulty<=7) {
            return 'orange';
          } else if (7< dificulty && dificulty<=10) {
            return 'red';
          }
        }
      
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JCrestelpro
0viewers