Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Polymer 2.0 Basic Legacy Element">
    <base href="//polygit2.appspot.com/webcomponentsjs+:v1/custom-elements+webcomponents+:master/shadydom+webcomponents+:master/shadycss+webcomponents+:master/polymer+:2.0-preview/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./polymer/polymer.html">
    <link rel="import" href="./paper-progress/paper-progress.html">
​
    <dom-module id="my-app">
      <template>
        <style>
​
       paper-progress {
        width: 100%;
        --paper-progress-height: 5px;
        }
​
      .header {
        align-items: center;
        display: flex;
      }
      .header-bar {
        padding: 0 25px;
        justify-content: space-between;
        width: 100%;
        display: flex;
      }
​
      .header-transition {
        padding: 24px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin: 5px 5px 0 5px;
      }
​
      .menu-adjustment {
        display: flex;
        align-items: center;
      }
​
      .progress-container {
        width: 100%;
      }
          
        </style>
     <div class="header-transition" id="mat" hiden$="[[opened]]">
​
      <div class="header-bar">
        <span class="header">Title</span>
​
        <div class="card-actions menu-adjustment">
          <div class="" id="headerContainer">
            <button></button>
          </div>
          <div><button></button>
        </div>
​
      </div>
​
      <div class="progress-container">
        <paper-progress indeterminate class="blue"></paper-progress>
      </div>
​
    </div>
​
    </template>
      <script>
        Polymer({
          is: 'my-app',
          properties: {
            preventLoad: {
              type: Boolean,
              value: false,
            },
          }
        });
      </script>
    </dom-module>
​
  </head>
  <body>
    <my-app></my-app>
  </body>
  </body>
</html>
Output 300px

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

Dismiss x
public
Bin info
dman777pro
0viewers