Merge pull request #1 from samuelli/vanilla

Remove polymer dependency
samuelli · Jan 17, 2017 · 58b1c68 · 58b1c68
2 parents 966a781 + 9ddcf15
commit 58b1c68
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -2,9 +2,7 @@
 
 # \<progress-bar\>
 
-Polymer indeterminate progress bar built with no other dependencies.
-
-Just 835 bytes gziped.
+`progress-bar` is a vanilla indeterminate progress bar with no dependencies that is smaller than 1KB.
 
 <!--
 ```
@@ -24,7 +22,7 @@ Just 835 bytes gziped.
       }
 
       progress-bar.fast {
-        --progress-bar-duration: 500ms;
+        --progress-bar-duration: 1s;
         --progress-bar-delay: 500ms;
         --progress-bar-color: #009688;
         height: 4px;
@@ -39,4 +37,14 @@ Just 835 bytes gziped.
 <progress-bar></progress-bar>
 <progress-bar class="salmon"></progress-bar>
 <progress-bar class="fast"></progress-bar>
-```
+```
+
+# API reference
+
+Disable the progress element using the `hidden` attribute.
+
+Custom property                                  | Description                                 | Default
+-------------------------------------------------|---------------------------------------------|--------------
+`--progress-bar-color      `                     | Color of the progress bar                   | `#37A0CE`
+`--progress-bar-duration`                        | Duration of the animation                   | `0.2s`
+`--progress-bar-delay`                           | Delay before the animation begins           | `0s`
diff --git a/bower.json b/bower.json
@@ -1,11 +1,8 @@
 {
   "name": "progress-bar",
-  "description": "Indeterminate progress bar",
+  "description": "Vanilla indeterminate progress bar",
   "main": "progress-bar.html",
-  "keywords": ["polymer", "loading", "progress", "bar"],
-  "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0"
-  },
+  "keywords": ["loading", "progress", "bar"],
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }

diff --git a/demo.html b/demo.html
@@ -0,0 +1,6 @@
+<head>
+  <link rel="import" href="progress-bar.html">
+</head>
+<body>
+  <progress-bar></progress-bar>
+</body>
diff --git a/progress-bar.html b/progress-bar.html
@@ -1,94 +1,81 @@
-<link rel="import" href="../polymer/polymer.html">
+<template>
+  <style>
+    :host {
+      display: block;
+      width: 100%;
+      height: 2px;
+      position: relative;
+      overflow: hidden;
+    }
 
-<!--
-`progress-bar` is an indeterminate progress bar with no dependencies.
+    :host([hidden]) {
+      display: none !important;
+    }
 
-Disable the progress element using the `hidden` attribute.
+    #primaryProgress {
+      background: var(--progress-bar-color, #37A0CE);
+      position:  absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: scaleX(0);
+      transform-origin: right center;
+      animation: indeterminate-bar var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+    }
 
-Custom property                                  | Description                                 | Default
--------------------------------------------------|---------------------------------------------|--------------
-`--progress-bar-color      `                     | Color of the progress bar                   | `#37A0CE`
-`--progress-bar-duration`                        | Duration of the animation                   | `0.2s`
-`--progress-bar-delay`                           | Delay before the animation begins           | `0s`
+    #primaryProgress::after {
+      content: "";
+      transform-origin: center center;
+      animation: indeterminate-splitter var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+    }
 
--->
-<dom-module id="progress-bar">
-  <template>
-    <style>
-      :host {
-        display: block;
-        width: 100%;
-        height: 2px;
-        position: relative;
-        overflow: hidden;
+    @keyframes indeterminate-bar {
+      0% {
+        transform: scaleX(1) translateX(-100%);
       }
-
-      :host([hidden]) {
-        display: none !important;
+      50% {
+        transform: scaleX(1) translateX(0%);
       }
-
-      #primaryProgress {
-        background: var(--progress-bar-color, #37A0CE);
-        position:  absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: scaleX(0);
-        will-change: transform;
-        transform-origin: right center;
-        animation: indeterminate-bar var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+      75% {
+        transform: scaleX(1) translateX(0%);
+        animation-timing-function: cubic-bezier(.28,.62,.37,.91);
       }
-
-      #primaryProgress::after {
-        content: "";
-        transform-origin: center center;
-        animation: indeterminate-splitter var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+      100% {
+        transform: scaleX(0) translateX(0%);
       }
+    }
 
-      @keyframes indeterminate-bar {
-        0% {
-          transform: scaleX(1) translateX(-100%);
-        }
-        50% {
-          transform: scaleX(1) translateX(0%);
-        }
-        75% {
-          transform: scaleX(1) translateX(0%);
-          animation-timing-function: cubic-bezier(.28,.62,.37,.91);
-        }
-        100% {
-          transform: scaleX(0) translateX(0%);
-        }
+    @keyframes indeterminate-splitter {
+      0% {
+        transform: scaleX(.75) translateX(-125%);
       }
-
-      @keyframes indeterminate-splitter {
-        0% {
-          transform: scaleX(.75) translateX(-125%);
-        }
-        30% {
-          transform: scaleX(.75) translateX(-125%);
-          animation-timing-function: cubic-bezier(.42,0,.6,.8);
-        }
-        90% {
-          transform: scaleX(.75) translateX(125%);
-        }
-        100% {
-          transform: scaleX(.75) translateX(125%);
-        }
+      30% {
+        transform: scaleX(.75) translateX(-125%);
+        animation-timing-function: cubic-bezier(.42,0,.6,.8);
       }
-    </style>
+      90% {
+        transform: scaleX(.75) translateX(125%);
+      }
+      100% {
+        transform: scaleX(.75) translateX(125%);
+      }
+    }
+  </style>
 
-    <div id="primaryProgress"></div>
-  </template>
-</dom-module>
+  <div id="primaryProgress"></div>
+</template>
 
 <script>
-  Polymer({
-    is: 'progress-bar',
+  (function() {
+    var template = document.currentScript.ownerDocument.querySelector('template');
+    var prototype = Object.create(HTMLElement.prototype);
+
+    prototype.createdCallback = function() {
+      this.setAttribute('role', 'progressbar');
+      this.createShadowRoot().appendChild(document.importNode(template.content, true));
+    }
 
-    hostAttributes: {
-      role: 'progressbar'
-    },
-  });
+    document.registerElement('progress-bar', {prototype: prototype});
+  })();
 </script>