summaryrefslogtreecommitdiff
path: root/packages/client/src/components/global/MkLoading.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
commit9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch)
treece5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/global/MkLoading.vue
parentwip: retention for dashboard (diff)
downloadmisskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz
misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2
misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/global/MkLoading.vue')
-rw-r--r--packages/client/src/components/global/MkLoading.vue101
1 files changed, 0 insertions, 101 deletions
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
deleted file mode 100644
index 64e12e3b44..0000000000
--- a/packages/client/src/components/global/MkLoading.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
- <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="[$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>
- </svg>
- </div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = withDefaults(defineProps<{
- inline?: boolean;
- colored?: boolean;
- mini?: boolean;
- em?: boolean;
-}>(), {
- inline: false,
- colored: true,
- mini: false,
- em: false,
-});
-</script>
-
-<style lang="scss" module>
-@keyframes spinner {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-.root {
- padding: 32px;
- text-align: center;
- cursor: wait;
-
- --size: 38px;
-
- &.colored {
- color: var(--accent);
- }
-
- &.inline {
- display: inline;
- padding: 0;
- --size: 32px;
- }
-
- &.mini {
- padding: 16px;
- --size: 32px;
- }
-
- &.em {
- display: inline-block;
- vertical-align: middle;
- padding: 0;
- --size: 1em;
- }
-}
-
-.container {
- position: relative;
- width: var(--size);
- height: var(--size);
- margin: 0 auto;
-}
-
-.spinner {
- position: absolute;
- top: 0;
- left: 0;
- width: var(--size);
- height: var(--size);
- fill-rule: evenodd;
- clip-rule: evenodd;
- stroke-linecap: round;
- stroke-linejoin: round;
- stroke-miterlimit: 1.5;
-}
-
-.bg {
- opacity: 0.275;
-}
-
-.fg {
- animation: spinner 0.5s linear infinite;
-}
-</style>