vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For ProgressSpinner

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-05-24 14:44:15 +03:00
parent 9377287826
commit ee81d3b10c
3 changed files with 78 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/lib/progressspinner/ProgressSpinner.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="p-progress-spinner" role="progressbar" v-bind="ptm('root')">
<svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
<circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
<div :class="cx('root')" role="progressbar" v-bind="ptm('root')">
<svg :class="cx('spinner')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
<circle :class="cx('circle')" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
</svg>
</div>
</template>
@ -12,20 +12,6 @@ import BaseComponent from 'primevue/basecomponent';
export default {
name: 'ProgressSpinner',
extends: BaseComponent,
props: {
strokeWidth: {
type: String,
default: '2'
},
fill: {
type: String,
default: 'none'
},
animationDuration: {
type: String,
default: '2s'
}
},
computed: {
svgStyle() {
return {
@ -35,31 +21,3 @@ export default {
}
};
</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 {
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>