75 lines
2.8 KiB
Vue
75 lines
2.8 KiB
Vue
<template>
|
|
<div class="loader">
|
|
<svg
|
|
class="icon"
|
|
height="200"
|
|
p-id="1166"
|
|
t="1676267704832"
|
|
version="1.1"
|
|
viewBox="0 0 1024 1024"
|
|
width="200"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M787.009641 293.979897c21.792821-0.183795 51.922051-0.459487 53.39241-0.722051a12.826256 12.826256 0 0 0 6.642872-3.610256l58.092308-57.737846a12.589949 12.589949 0 0 0 3.662769-6.603488c0.393846-2.376205-0.131282-4.424205-1.496615-5.802666l-67.872821-67.413334c-1.352205-1.378462-3.452718-1.890462-5.77641-1.522871a12.616205 12.616205 0 0 0-6.695385 3.610256l-58.092307 57.737846a12.826256 12.826256 0 0 0-3.675898 6.669128c-0.236308 1.575385 4.030359 35.997538 3.977846 57.803488-54.350769-40.539897-114.346667-68.096-184.595692-78.336V116.36841h25.915077c2.691282 0 10.660103-3.990974 12.524308-5.356307 2.021744-1.378462 8.388923-6.445949 8.388923-8.375795V7.286154c0-1.929846-6.419692-3.807179-8.310154-5.172513-1.929846-1.352205-9.885538-2.113641-12.603077-2.113641H419.052308c-2.743795 0-11.106462 0.774564-13.049436 2.139897-1.890462 1.352205-8.756513 3.21641-8.756513 5.146257v95.310769c0 1.969231 6.892308 7.036718 8.795897 8.402051 1.929846 1.339077 10.266256 5.369436 13.036308 5.369436h24.996103v81.657436C256.761436 227.511795 91.897436 400.108308 91.897436 608.518564 91.897436 837.618872 281.888821 1024 512.380718 1024 742.859487 1024 931.577436 837.632 931.577436 608.518564c-0.026256-125.702564-55.492923-238.316308-144.567795-314.538667z m-67.413333 146.116924L530.825846 627.698872a25.665641 25.665641 0 0 1-35.551179-0.590769 25.337436 25.337436 0 0 1-0.577641-35.341129l188.783589-187.602051a25.521231 25.521231 0 0 1 18.064411-7.443692 25.665641 25.665641 0 0 1 18.051282 7.443692 25.403077 25.403077 0 0 1 0 35.905641z"
|
|
fill="#ffffff"
|
|
p-id="1167"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
watch(
|
|
() => props.loading,
|
|
(v) => {
|
|
const el: HTMLElement = document.querySelector('body') as HTMLElement
|
|
if (v) {
|
|
el.classList.add('loading')
|
|
}
|
|
else {
|
|
el.classList.remove('loading')
|
|
}
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loader::before {
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 2;
|
|
content: "";
|
|
width: 100vmax;
|
|
height: 100vmax;
|
|
position: fixed;
|
|
border-radius: 66%;
|
|
background: var(--lime-soap);
|
|
transition: transform 0.5s cubic-bezier(0, 0, 0.5, 1.25);
|
|
transform: translate(-50%, -50%) scale(0);
|
|
}
|
|
|
|
.loader svg {
|
|
top: 50%;
|
|
left: 50%;
|
|
opacity: 0;
|
|
z-index: 3;
|
|
height: 8em;
|
|
color: white;
|
|
position: fixed;
|
|
visibility: hidden;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
transition: opacity 0.3s, transform 0.5s cubic-bezier(0.5, 0, 0.5, 1.5),
|
|
visibility 0.3s;
|
|
}
|
|
</style>
|