create progress bars

2026-04-12 02:41:07 +00:00 · 2017-01-03 00:10:11 -02:00 · 2017-01-03 00:10:11 -02:00 · 4bdfcf9e08
commit 4bdfcf9e08
parent 41a0dbb220
6 changed files with 212 additions and 29 deletions
--- a/docs/src/pages/components/Progress.vue
+++ b/docs/src/pages/components/Progress.vue
@ -23,9 +23,15 @@

            <md-table-body>
              <md-table-row>
-                <md-table-cell>empty</md-table-cell>
-                <md-table-cell><code>Type</code></md-table-cell>
-                <md-table-cell>Description</md-table-cell>
+                <md-table-cell>md-indeterminate</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-progress</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Define the current progress of the progress. Default <code>0</code></md-table-cell>
              </md-table-row>
            </md-table-body>
          </md-table>
@ -35,24 +41,56 @@
      <div slot="example">
        <example-box card-title="Determinate">
          <div class="progress-demo" slot="demo">
-            <md-progress></md-progress>
+            <div class="progress-area">
+              <md-progress :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress class="md-accent" :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
+            </div>
+
+            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
          </div>

          <div slot="code">
            <code-block lang="xml">
-
+              &lt;md-progress :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-accent&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-warn&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
            </code-block>
          </div>
        </example-box>

        <example-box card-title="Indeterminate">
          <div class="progress-demo" slot="demo">
-            <md-progress></md-progress>
+            <div class="progress-area">
+              <md-progress md-indeterminate v-if="transition"></md-progress>
+              <md-progress class="md-accent" md-indeterminate v-if="transition"></md-progress>
+              <md-progress class="md-warn" md-indeterminate v-if="transition"></md-progress>
+            </div>
          </div>

          <div slot="code">
            <code-block lang="xml">
+              &lt;md-progress md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-accent&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-warn&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+            </code-block>
+          </div>
+        </example-box>

+        <example-box card-title="Themes">
+          <div class="progress-demo" slot="demo">
+            <div class="progress-area">
+              <md-progress md-theme="orange" md-indeterminate v-if="transition"></md-progress>
+              <md-progress md-theme="green" :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress md-theme="purple" md-indeterminate v-if="transition"></md-progress>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-progress md-theme=&quot;orange&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress md-theme=&quot;green&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress md-theme=&quot;purple&quot; md-indeterminate&gt;&lt;/md-progress&gt;
            </code-block>
          </div>
        </example-box>
@ -62,19 +100,49 @@
 </template>

 <style lang="scss" scoped>
+  .progress-area {
+    height: 44px;

+    + .md-button {
+      margin: 16px 0 0;
+    }
+  }
+
+  .md-progress {
+    margin-bottom: 16px;
+  }
 </style>

 <script>
  export default {
    data: () => ({
-
+      progress: 0,
+      progressInterval: null,
+      transition: true
    }),
    methods: {
+      startProgress() {
+        this.progressInterval = window.setInterval(() => {
+          this.progress += 3;

+          if (this.progress > 100) {
+            window.clearInterval(this.progressInterval);
+          }
+        }, 100);
+      },
+      restartProgress() {
+        this.progress = 0;
+        this.transition = false;
+
+        window.clearInterval(this.progressInterval);
+        window.setTimeout(() => {
+          this.transition = true;
+          this.startProgress();
+        }, 600);
+      }
    },
    mounted() {
-      console.log(this.$material);
+      this.startProgress();
    }
  };
 </script>
--- a/src/components/mdProgress/mdProgress.scss
+++ b/src/components/mdProgress/mdProgress.scss
@ -1,5 +1,84 @@
@import '../../core/stylesheets/variables.scss';

 .md-progress {
+  width: 100%;
+  height: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: $swift-ease-out;

+  &.md-indeterminate .md-progress-track {
+    right: 0;
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      will-change: left, right;
+      content: '';
+    }
+
+    &:before {
+      animation: progress-indeterminate 2.3s cubic-bezier(.65, .815, .735, .395) infinite;
+    }
+
+    &:after {
+      animation: progress-indeterminate-short 2.3s cubic-bezier(.165, .84, .44, 1) infinite;
+      animation-delay: 1.15s;
+    }
+  }
+
+  &.md-progress-enter,
+  &.md-progress-leave-active {
+    opacity: 0;
+    transform: scaleY(0) translateZ(0);
+  }
+
+  &.md-progress-enter-active {
+    transform: scaleY(1) translateZ(0);
+  }
+}
+
+.md-progress-track {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: $swift-ease-out;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    right: 100%;
+    left: -35%;
+  }
+
+  60% {
+    right: -100%;
+    left: 100%;
+  }
+
+  100% {
+    right: -100%;
+    left: 100%;
+  }
+}
+
+@keyframes progress-indeterminate-short {
+  0% {
+    right: 100%;
+    left: -200%;
+  }
+
+  60% {
+    right: -8%;
+    left: 107%;
+  }
+
+  100% {
+    right: -8%;
+    left: 107%;
+  }
 }
--- a/src/components/mdProgress/mdProgress.theme
+++ b/src/components/mdProgress/mdProgress.theme
@ -1,5 +1,46 @@
 .THEME_NAME {
  &.md-progress {
+    background-color: #{'PRIMARY-COLOR-0.38'};

+    &:not(.md-indeterminate) .md-progress-track {
+      background-color: #{'PRIMARY-COLOR'};
+    }
+
+    .md-progress-track {
+      &:after,
+      &:before {
+        background-color: #{'PRIMARY-COLOR'};
+      }
+    }
+
+    &.md-accent {
+      background-color: #{'ACCENT-COLOR-0.38'};
+
+      &:not(.md-indeterminate) .md-progress-track {
+        background-color: #{'ACCENT-COLOR'};
+      }
+
+      .md-progress-track {
+        &:after,
+        &:before {
+          background-color: #{'ACCENT-COLOR'};
+        }
+      }
+    }
+
+    &.md-warn {
+      background-color: #{'WARN-COLOR-0.38'};
+
+      &:not(.md-indeterminate) .md-progress-track {
+        background-color: #{'WARN-COLOR'};
+      }
+
+      .md-progress-track {
+        &:after,
+        &:before {
+          background-color: #{'WARN-COLOR'};
+        }
+      }
+    }
  }
 }
--- a/src/components/mdProgress/mdProgress.vue
+++ b/src/components/mdProgress/mdProgress.vue
@ -1,6 +1,7 @@
 <template>
  <transition name="md-progress" appear>
-    <div class="md-progress" :class="[themeClass, classes]":style="styles">
+    <div class="md-progress" :class="[themeClass, classes]">
+      <div class="md-progress-track" :style="styles"></div>
    </div>
  </transition>
 </template>
@ -12,26 +13,26 @@

  export default {
    props: {
-
+      mdIndeterminate: Boolean,
+      mdProgress: {
+        type: Number,
+        default: 0
+      }
    },
    mixins: [theme],
    computed: {
      classes() {
        return {
-
+          'md-indeterminate': this.mdIndeterminate
        };
      },
      styles() {
-        return {
-
-        };
+        if (!this.mdIndeterminate) {
+          return {
+            width: this.mdProgress + '%'
+          };
+        }
      }
-    },
-    data: () => ({
-
-    }),
-    methods: {
-
    }
  };
 </script>
--- a/src/components/mdSpinner/mdSpinner.theme
+++ b/src/components/mdSpinner/mdSpinner.theme
@ -1,18 +1,18 @@
 .THEME_NAME {
  &.md-spinner {
    .md-spinner-path {
-      stroke: #{'PRIMARY-COLOR'}
+      stroke: #{'PRIMARY-COLOR'};
    }

    &.md-accent {
      .md-spinner-path {
-        stroke: #{'ACCENT-COLOR'}
+        stroke: #{'ACCENT-COLOR'};
      }
    }

    &.md-warn {
      .md-spinner-path {
-        stroke: #{'WARN-COLOR'}
+        stroke: #{'WARN-COLOR'};
      }
    }
  }
--- a/src/components/mdSpinner/mdSpinner.vue
+++ b/src/components/mdSpinner/mdSpinner.vue
@ -57,12 +57,6 @@

        return `${progress}, 200`;
      }
-    },
-    data: () => ({
-
-    }),
-    methods: {
-
    }
  };
 </script>