vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

New Component: ProgressSpinner

pull/41/head
cagataycivici 2019-07-22 17:10:15 +03:00
parent 1f97d2f1f8
commit 9043c70207
9 changed files with 291 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/progressspinner.d.ts vendored Normal file
View File

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

2
exports/progressspinner.js Normal file
View File

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

1
src/AppMenu.vue
View File

@ -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>

7
src/components/progressspinner/ProgressSpinner.d.ts vendored Normal file
View File

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

109
src/components/progressspinner/ProgressSpinner.vue Normal file
View File

@ -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>

2
src/main.js
View File

@ -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);

5
src/router.js
View File

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

30
src/views/progressspinner/ProgressSpinnerDemo.vue Normal file
View File

@ -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>

134
src/views/progressspinner/ProgressSpinnerDoc.vue Normal file
View File

@ -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>