131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
:style="cssProps"
|
|
class="loader"
|
|
role="alert"
|
|
aria-label="Loading new page"
|
|
:class="[
|
|
loaderColor,
|
|
loaderPosition,
|
|
allowPageInteraction ? 'allow-ui-interaction' : ''
|
|
]"
|
|
@click="captureClick"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'loader',
|
|
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
|
|
props: {
|
|
allowPageInteraction: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/* Color options: red, green, blue, white, black */
|
|
loaderColor: {
|
|
type: String
|
|
},
|
|
/* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
|
|
loaderPosition: {
|
|
type: String
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
computed: {
|
|
cssProps() {
|
|
return {
|
|
'--loader-width': `${this.width}rem`,
|
|
'--loader-height': `${this.height}rem`
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
captureClick(event) {
|
|
if (!this.allowPageInteraction) {
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loader {
|
|
display: flex;
|
|
|
|
//Open an overlay to prevent page interaction
|
|
&:before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: transparent;
|
|
z-index: 9999;
|
|
cursor: default;
|
|
}
|
|
|
|
&.date-picker-hidden {
|
|
&:before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&.allow-ui-interaction::before {
|
|
//no-block to enable clicking on certain buttons with loaders while the loader is actives
|
|
pointer-events: none;
|
|
}
|
|
|
|
//Spinner basics
|
|
&:after {
|
|
content: "";
|
|
mask: url(../../assets/img/icons/spinner.svg);
|
|
mask-size: cover;
|
|
position: relative;
|
|
width: var(--loader-width);
|
|
height: var(--loader-height);
|
|
border-radius:50%;
|
|
animation: rotation 1s infinite linear;
|
|
@keyframes rotation {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
//Spinner position
|
|
&.center {
|
|
justify-content: center;
|
|
}
|
|
&.right {
|
|
right: 1rem;
|
|
}
|
|
&.left {
|
|
left: 1rem;
|
|
}
|
|
//Spinner color
|
|
&:after {
|
|
//Default spinner color (blue) if no other color is specified from the options below
|
|
background-color: $blue;
|
|
}
|
|
&.red:after {
|
|
background-color: $red;
|
|
}
|
|
&.green:after {
|
|
background-color: $green;
|
|
}
|
|
&.white:after {
|
|
background-color: $white;
|
|
}
|
|
&.black:after {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
</style>
|