diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/global/MkLoading.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-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.vue | 101 |
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> |