limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 14:07:38 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2020-02-10 20:44:59 +09:00
parent da2d191201
commit 25374271b0
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>
<div class="yxspomdl">
<fa :icon="faSpinner" pulse fixed-width class="icon"/>
<div class="ring"></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
data() {
return {
faSpinner
};
},
});
</script>
<style lang="scss" scoped>
@keyframes ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.yxspomdl {
padding: 32px;
text-align: center;
> .icon {
font-size: 32px;
opacity: 0.5;
> .ring {
display: inline-block;
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>