vuepress-theme-reco/components/Loading.vue
2019-09-20 13:54:13 +08:00

114 lines
3.0 KiB
Vue

<template>
<div id="loader-wrapper">
<div class="loader-main">
<div v-for="item in 4" :key="`out${item}`">
</div>
</div>
<h3 class="title" v-if="$frontmatter.home">Welcome {{$site.title}}</h3>
<p class="description">Just wait a minute!</p>
</div>
</template>
<script>
import mixin from '@theme/mixins/index.js'
export default {
mixins: [mixin]
}
</script>
<style lang="stylus" scoped>
#loader-wrapper{
height:100vh;
width:100vw;
.loader-main{
position:fixed;
width:120px;
height:50px;
top:45%;
left:50%;
z-index:555;
transform:translate(-50%,0);
div {
&:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; }
&:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; }
&:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; }
&:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; }
&:first-of-type{
width:0px;
height:0px;
border-right:25px solid transparent;
border-top:25px solid $accentColor;
border-left:25px solid $accentColor;
border-bottom:25px solid $accentColor;
border-radius:25px;
animation:rotate_pacman_half_up 0.5s 0s infinite;
}
&:nth-child(2){
width:0px;
height:0px;
border-right:25px solid transparent;
border-top:25px solid $accentColor;
border-left:25px solid $accentColor;
border-bottom:25px solid $accentColor;
border-radius:25px;
animation:rotate_pacman_half_down 0.5s 0s infinite;
margin-top:-50px;}
&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){
background-color:$accentColor;
width:15px;
height:15px;
border-radius:100%;
margin:2px;
width:10px;
height:10px;
position:absolute;
transform:translate(0,-6.25px);
top:25px;
left:100px;
}
}
}
.title {
position: absolute;
left 0
right 0
top 12%
margin auto
text-align center
color $textColor
font-size 30px
box-sizing: border-box;
padding: 0 10px;
text-shadow 0 2px 10px rgba(0,0,0,0.2);
}
.description {
position: absolute;
left 0
right 0
top 20%
margin auto
text-align center
color $textColor
font-size 22px
box-sizing: border-box;
padding: 0 10px;
text-shadow 0 2px 10px rgba(0,0,0,0.2);
}
@keyframes pacman-balls{
75%{opacity:0.7;}
100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@keyframes rotate_pacman_half_up{
0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@keyframes rotate_pacman_half_down{
0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
}
</style>