feat(demos): Added demo for linear progress component

demo/router/index.js

@@ -37,6 +37,10 @@ export default new VueRouter({
       path: '/iconToggle',
       component: () => import('views/IconToggleView')
     },
+    {
+      path: '/linearProgress',
+      component: () => import('views/LinearProgressView')
+    },
     {
       path: '/textfield',
       component: () => import('views/TextfieldView')

demo/store/modules/app.js

@@ -43,6 +43,11 @@ const state = {
       route: '/iconToggle',
       icon: 'code'
     },
+    linearProgress: {
+      text: 'LinearProgress',
+      route: '/linearProgress',
+      icon: 'code'
+    },
     textfield: {
       text: 'Textfield',
       route: '/textfield',

demo/views/LinearProgressView.vue

@@ -0,0 +1,38 @@
+<template>
+    <m-layout-grid-inner>
+        <m-layout-grid-cell :span="12">
+            <m-typo-display :level="1">LinearProgress</m-typo-display>
+            <m-typo-body :level="2">
+                <a href="https://github.com/matsp/material-components-vue/blob/master/components/LinearProgress">
+                    https://github.com/matsp/material-components-vue/blob/master/components/LinearProgress
+                </a>
+            </m-typo-body>
+        </m-layout-grid-cell>
+        <m-layout-grid-cell :span="8" class="flex">
+            <m-linear-progress ref="progress" open :progress="0.5" :buffer="0.5" indeterminate/>
+            <br />
+            <m-button @click="stopProgress" raised interactive> Hide </m-button>
+            <p />
+            <m-button @click="startProgress" stroked> Show </m-button>
+        </m-layout-grid-cell>
+    </m-layout-grid-inner>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: '',
+      pw: ''
+    }
+  },
+  methods: {
+    stopProgress () {
+      this.$refs.progress.hide()
+    },
+    startProgress () {
+      this.$refs.progress.show()
+    }
+  }
+}
+</script>