New Component: ProgressSpinner

exports/progressspinner.d.ts

@@ -0,0 +1 @@
+export * from './components/progressspinner/ProgressSpinner';

exports/progressspinner.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/progressspinner/ProgressSpinner.vue');

src/AppMenu.vue

@@ -171,6 +171,7 @@
                     <div>
                         <router-link to="/inplace">&#9679; Inplace</router-link>
                         <router-link to="/progressbar">&#9679; ProgressBar</router-link>
+                        <router-link to="/progressspinner">&#9679; ProgressSpinner</router-link>
                     </div>
                 </div>
             </transition>

src/components/progressspinner/ProgressSpinner.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+export declare class ProgressSpinner extends Vue {
+    strokeWidth?: string;
+    fill?: string;
+    animationDuration?: string;
+}

src/components/progressspinner/ProgressSpinner.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="p-progress-spinner">
+        <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle">
+            <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" />
+        </svg>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        strokeWidth: {
+            type: String,
+            default: '2'
+        },
+        fill: {
+            type: String,
+            default: 'none'
+        },
+        animationDuration: {
+            type: String,
+            default: '2s'
+        }
+    },
+    computed: {
+        svgStyle() {
+            return {
+                'animation-duration': this.animationDuration
+            };
+        }
+    }
+}
+</script>
+
+<style>
+.p-progress-spinner {
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+}
+
+.p-progress-spinner::before {
+     content: '';
+     display: block;
+     padding-top: 100%;
+}
+
+.p-progress-spinner-svg {
+    animation: p-progress-spinner-rotate 2s linear infinite;
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+.p-progress-spinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: #d62d20;
+    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@keyframes p-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progress-spinner-color {
+    100%,
+    0% {
+        stroke: #d62d20;
+    }
+    40% {
+        stroke: #0057e7;
+    }
+    66% {
+        stroke: #008744;
+    }
+    80%,
+    90% {
+        stroke: #ffa700;
+    }
+}
+
+</style>

src/main.js

@@ -35,6 +35,7 @@ import Panel from './components/panel/Panel';
 import Password from './components/password/Password';
 import PickList from './components/picklist/PickList';
 import ProgressBar from './components/progressbar/ProgressBar';
+import ProgressSpinner from './components/progressspinner/ProgressSpinner';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
@@ -100,6 +101,7 @@ Vue.component('Panel', Panel);
 Vue.component('Password', Password);
 Vue.component('PickList', PickList);
 Vue.component('ProgressBar', ProgressBar);
+Vue.component('ProgressSpinner', ProgressSpinner);
 Vue.component('RadioButton', RadioButton);
 Vue.component('Rating', Rating);
 Vue.component('SelectButton', SelectButton);

src/router.js

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

src/views/progressspinner/ProgressSpinnerDemo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ProgressSpinner</h1>
+                <p>ProgressSpinner is a process status indicator.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <ProgressSpinner />
+
+            <h3>Custom</h3>
+            <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
+        </div>
+
+        <ProgressSpinnerDoc/>
+    </div>
+</template>
+
+<script>
+import ProgressSpinnerDoc from './ProgressSpinnerDoc';
+
+export default {
+    components: {
+        'ProgressSpinnerDoc': ProgressSpinnerDoc
+    }
+}
+</script>

src/views/progressspinner/ProgressSpinnerDoc.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import ProgressSpinner from 'primevue/progressspinner';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>ProgressSpinner is defined using ProgressSpinner element.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;ProgressSpinner /&gt;
+</template>
+</CodeHighlight>
+
+                <h3>Colors</h3>
+                <p>Colors of the spinner can be changed by overriding the keyframes animation.</p>
+<CodeHighlight lang="css">
+@keyframes ui-progress-spinner-color {
+    100%,
+    0% {
+        stroke: #d62d20;
+    }
+    40% {
+        stroke: #0057e7;
+    }
+    66% {
+        stroke: #008744;
+    }
+    80%,
+    90% {
+        stroke: #ffa700;
+    }
+}
+</CodeHighlight>
+
+				<h3>Properties</h3>
+                <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>strokeWidth</td>
+                                <td>string</td>
+                                <td>2</td>
+                                <td>Width of the circle stroke.</td>
+                            </tr>
+                            <tr>
+                                <td>fill</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Color for the background of the circle.</td>
+                            </tr>
+                            <tr>
+                                <td>animationDuration</td>
+                                <td>string</td>
+                                <td>2s</td>
+                                <td>Duration of the rotate animation.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-progress-spinner</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-progress-circle</td>
+                                <td>SVG element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-progress-path</td>
+                                <td>Circle element.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;ProgressSpinner&lt;/h1&gt;
+            &lt;p&gt;ProgressSpinner is a process status indicator.&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="content-section implementation"&gt;
+        &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+        &lt;ProgressSpinner /&gt;
+
+        &lt;h3&gt;Custom&lt;/h3&gt;
+        &lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
+    &lt;/div&gt;
+
+    &lt;ProgressSpinnerDoc/&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>