emilis/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: use css module at components/global/loading.vue (#8750)

Browse source 
* refactor: use css module at components/global/loading.vue

* rename class name to "root"
This commit is contained in:
tamaina 2022-05-29 00:15:32 +09:00 committed by GitHub
parent 4a50c49211
commit abc8998b48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/client/src/components/global/loading.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="yxspomdl" :class="{ inline, colored, mini }">
<div class="container">
<svg class="spinner bg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
<div :class="$style.container">
<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g>
</svg>
<svg class="spinner fg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g>
@ -16,7 +16,9 @@
</template>
<script lang="ts" setup>
import { } from 'vue';
import { useCssModule } from 'vue';
useCssModule();
const props = withDefaults(defineProps<{
inline?: boolean;
@ -29,7 +31,7 @@ const props = withDefaults(defineProps<{
});
</script>
<style lang="scss" scoped>
<style lang="scss" module>
@keyframes spinner {
0% {
transform: rotate(0deg);
@ -39,7 +41,7 @@ const props = withDefaults(defineProps<{
}
}
.yxspomdl {
.root {
padding: 32px;
text-align: center;
cursor: wait;
@ -60,14 +62,16 @@ const props = withDefaults(defineProps<{
padding: 16px;
--size: 32px;
}
}
> .container {
.container {
position: relative;
width: var(--size);
height: var(--size);
margin: 0 auto;
}
> .spinner {
.spinner {
position: absolute;
top: 0;
left: 0;
@ -78,15 +82,13 @@ const props = withDefaults(defineProps<{
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
}
}
> .bg {
.bg {
opacity: 0.275;
}
}
> .fg {
.fg {
animation: spinner 0.5s linear infinite;
}
}
}
</style>