Implemented ProgressBar

src/AppMenu.vue

@@ -137,7 +137,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 10, 'submenushow': activeMenuIndex === 10}">
                 <div>
-                    <router-link to="/">&#9679; Link</router-link>
+                    <router-link to="/progressbar">&#9679; ProgressBar</router-link>
                 </div>
             </div>
         </div>

src/assets/styles/primevue.css

@@ -9,6 +9,7 @@
 @import '../../components/inputswitch/InputSwitch.css';
 @import '../../components/listbox/Listbox.css';
 @import '../../components/panel/Panel.css';
+@import '../../components/progressbar/ProgressBar.css';
 @import '../../components/radiobutton/RadioButton.css';
 @import '../../components/rating/Rating.css';
 @import '../../components/slider/Slider.css';

src/components/progressbar/ProgressBar.css

@@ -0,0 +1,109 @@
+.p-progressbar { 
+    height: 1.2em; 
+    text-align: left; 
+    position: relative;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+}
+
+.p-progressbar-determinate .p-progressbar-value-animate {
+    -webkit-transition: width 1s ease-in-out;
+    -moz-transition: width 1s ease-in-out;
+    -o-transition: width 1s ease-in-out;
+    transition: width 1s ease-in-out;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    font-weight: bold;
+}
+
+.p-progressbar-indeterminate {
+    height: .5em;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value {
+    border: 0 none;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+              animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+            animation-delay: 1.15s;
+}
+    
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+@keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; } 
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; } 
+}

src/components/progressbar/ProgressBar.vue

@@ -0,0 +1,48 @@
+<template>
+    <div role="progressbar" :class="containerClass" :aria-valuemin="0" :aria-valuenow="value" :aria-valuemax="100">
+        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle"></div>
+        <div v-if="determinate && value" class="p-progressbar-label">{{value + '%'}}</div>
+        <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
+            <div class="p-progressbar-value p-progressbar-value-animate"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Number,
+        mode: {
+            type: String,
+            default: 'determinate'
+        },
+        showValue: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-progressbar p-component',
+                {
+                    'p-progressbar-determinate': this.determinate,
+                    'p-progressbar-indeterminate': this.indeterminate
+                }
+            ];
+        },
+        progressStyle() {
+            return {
+                width: this.value + '%', 
+                display: 'block'
+            };
+        },
+        indeterminate() {
+            return this.mode === 'indeterminate';
+        },
+        determinate() {
+            return this.mode === 'determinate';
+        }
+    }
+}
+</script>

src/main.js

@@ -13,6 +13,7 @@ import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
 import Panel from './components/panel/Panel';
+import ProgressBar from './components/progressbar/ProgressBar';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
@@ -43,6 +44,7 @@ Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-panel', Panel);
+Vue.component('p-progressBar', ProgressBar);
 Vue.component('p-radioButton', RadioButton);
 Vue.component('p-rating', Rating);
 Vue.component('p-selectButton', SelectButton);

src/router.js

@@ -71,6 +71,11 @@ export default new Router({
         name: 'panel',
         component: () => import('./views/panel/PanelDemo.vue')
     },
+    {
+        path: '/progressbar',
+        name: 'progressbar',
+        component: () => import('./views/progressbar/ProgressBarDemo.vue')
+    },
     {
         path: '/radiobutton',
         name: 'radiobutton',

src/views/progressbar/ProgressBarDemo.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ProgressBar</h1>
+                <p>ProgressBar is a process status indicator.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Dynamic</h3>
+            <p-progressBar :value="value1" />
+
+            <h3>Static</h3>
+            <p-progressBar :value="value2" :showValue="false" />
+
+            <h3>Indeterminate</h3>
+            <p-progressBar mode="indeterminate" style="height: .5em" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 50
+        }
+    },
+    interval: null,
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
+                if (newValue >= 100) {
+                    newValue = 100;
+                }
+                this.value1 = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeDestroy() {
+        this.endProgress();  
+    }
+}
+</script>
+
+<style>
+
+</style>