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

🎨

Browse source
This commit is contained in:
syuilo 2020-02-10 20:44:59 +09:00
parent b5d38adfcc
commit e23bac47ba
1 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/client/components/loading.vue
View file

@ -1,30 +1,47 @@
<template> <template>
<div class="yxspomdl"> <div class="yxspomdl">
<fa :icon="faSpinner" pulse fixed-width class="icon"/> <div class="ring"></div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({ export default Vue.extend({
data() {
return {
faSpinner
};
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.yxspomdl { .yxspomdl {
padding: 32px; padding: 32px;
text-align: center; text-align: center;
> .icon { > .ring {
font-size: 32px; display: inline-block;
opacity: 0.5; width: 80px;
height: 80px;
opacity: 0.7;
}
> .ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: solid 6px;
border-color: var(--fg) transparent transparent transparent;
animation: ring 0.5s linear infinite;
} }
} }
</style> </style>