mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - For ProgressSpinner
This commit is contained in:
parent
9377287826
commit
ee81d3b10c
3 changed files with 78 additions and 45 deletions
70
components/lib/progressspinner/BaseProgressSpinner.vue
Normal file
70
components/lib/progressspinner/BaseProgressSpinner.vue
Normal file
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.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;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-progress-spinner',
|
||||
spinner: 'p-progress-spinner-svg',
|
||||
circle: 'p-progress-spinner-circle'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressspinner_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseProgressSpinner',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
strokeWidth: {
|
||||
type: String,
|
||||
default: '2'
|
||||
},
|
||||
fill: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
animationDuration: {
|
||||
type: String,
|
||||
default: '2s'
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue