Skip to content

Commit c969aa8

Browse files
recoluanrecoluan
committed
fix: loading page
1 parent 00a49c8 commit c969aa8

File tree

4 files changed

+68
-121
lines changed

4 files changed

+68
-121
lines changed

‎components/Loading.vue‎

Lines changed: 62 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,75 @@
11
<template>
22
<div id="loader-wrapper">
3-
<Background></Background>
43
<div class="loader-main">
5-
<div class="loader-squ" v-for="item in 4" :key="`out${item}`">
6-
<span v-for="subItem in 3" :key="`in${subItem}`" :style="{background: _tagColor()}"></span>
4+
<div v-for="item in 4" :key="`out${item}`">
75
</div>
86
</div>
9-
<h3 class="title">{{isPage ? $frontmatter.title : $site.title}}</h3>
10-
<p class="description" v-if="!isPage">{{$site.description}}</p>
7+
<h3 class="title">Welcome {{$site.title}}</h3>
8+
<p class="description">Just wait a minute!</p>
119
</div>
1210
</template>
1311

1412
<script>
15-
import Background from '@theme/components/Background'
1613
import mixin from '@theme/mixins/index.js'
1714
export default {
18-
mixins: [mixin],
19-
components: {Background}
15+
mixins: [mixin]
2016
};
2117
</script>
2218
<style lang="stylus" scoped>
2319
#loader-wrapper{
2420
height:100vh;
2521
width:100vw;
2622
// background:#888;
27-
// background-image: radial-gradient(at center top, green 0px, rgb(0, 1, 5) 100%);
23+
// background-image: radial-gradient(at center top, $accentColor 0px, rgb(0, 1, 5) 100%);
2824
.loader-main{
29-
position:absolute;
30-
top:60%;
25+
position:fixed;
26+
width:120px;
27+
height:50px;
28+
top:45%;
3129
left:50%;
32-
width:172px;
33-
height:128px;
34-
margin:0;
35-
-webkit-transform:translate(-50%,-50%);
36-
transform:translate(-50%,-50%);
30+
z-index:555;
31+
transform:translate(-50%,0);
32+
div {
33+
&:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; }
34+
&:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; }
35+
&:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; }
36+
&:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; }
37+
&:first-of-type{
38+
width:0px;
39+
height:0px;
40+
border-right:25px solid transparent;
41+
border-top:25px solid $accentColor;
42+
border-left:25px solid $accentColor;
43+
border-bottom:25px solid $accentColor;
44+
border-radius:25px;
45+
animation:rotate_pacman_half_up 0.5s 0s infinite;
46+
}
47+
&:nth-child(2){
48+
width:0px;
49+
height:0px;
50+
border-right:25px solid transparent;
51+
border-top:25px solid $accentColor;
52+
border-left:25px solid $accentColor;
53+
border-bottom:25px solid $accentColor;
54+
border-radius:25px;
55+
animation:rotate_pacman_half_down 0.5s 0s infinite;
56+
margin-top:-50px;}
57+
&:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6){
58+
background-color:$accentColor;
59+
width:15px;
60+
height:15px;
61+
border-radius:100%;
62+
margin:2px;
63+
width:10px;
64+
height:10px;
65+
position:absolute;
66+
transform:translate(0,-6.25px);
67+
top:25px;
68+
left:100px;
69+
}
70+
}
3771
}
72+
3873
.title {
3974
position: absolute;
4075
left 0
@@ -61,104 +96,21 @@ export default {
6196
padding: 0 10px;
6297
text-shadow 0 2px 10px rgba(0,0,0,0.2);
6398
}
64-
}
6599
66-
.loader-squ{
67-
position:relative;
68-
&:nth-child(1){
69-
margin-left:0px;
70-
span{
71-
-webkit-animation:animsquare1 2s infinite ease-in;
72-
animation:animsquare1 2s infinite ease-in;
73-
&:nth-child(1){
74-
-webkit-animation-delay:0.00s;
75-
animation-delay:0.00s
76-
}
77-
&:nth-child(2){
78-
-webkit-animation-delay:0.15s;
79-
animation-delay:0.15s
80-
}
81-
&:nth-child(3){
82-
-webkit-animation-delay:0.30s;
83-
animation-delay:0.30s
84-
}
85-
}
86-
}
87-
&:nth-child(2){
88-
margin-left:44px;
89-
span{
90-
-webkit-animation:animsquare2 2s infinite ease-in;
91-
animation:animsquare2 2s infinite ease-in
92-
}
93-
}
94-
&:nth-child(3){
95-
margin-left:88px;
96-
span{
97-
-webkit-animation:animsquare3 2s infinite ease-in;
98-
animation:animsquare3 2s infinite ease-in
99-
}
100+
@keyframes pacman-balls{
101+
75%{opacity:0.7;}
102+
100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
100103
}
101-
&:nth-child(4){
102-
margin-left:132px;
103-
span{
104-
-webkit-animation:animsquare4 2s infinite ease-in;
105-
animation:animsquare4 2s infinite ease-in
106-
}
104+
@keyframes rotate_pacman_half_up{
105+
0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
106+
50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
107+
100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
107108
}
108-
span {
109-
position:absolute;
110-
top:0px;
111-
left:20px;
112-
height:36px;
113-
width:36px;
114-
border-radius:2px;
115-
background-color:#FFFFFF;
116-
box-shadow 0 2px 10px rgba(0,0,0,0.2);
117-
&:nth-child(1){top:0px}
118-
&:nth-child(2){top:44px}
119-
&:nth-child(3){top:88px}
109+
@keyframes rotate_pacman_half_down{
110+
0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
111+
50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
112+
100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
120113
}
121114
}
122115
123-
@keyframes animsquare1{
124-
0%,5%,95%,100%{
125-
-webkit-transform:translate(0px,0px) rotate(0deg);
126-
transform:translate(0px,0px) rotate(0deg)
127-
}
128-
30%,70%{
129-
-webkit-transform:translate(-40px,0px) rotate(-90deg);
130-
transform:translate(-40px,0px) rotate(-90deg)
131-
}
132-
}
133-
134-
@keyframes animsquare2{
135-
0%,10%,90%,100%{
136-
-webkit-transform:translate(0px,0px) rotate(0deg);
137-
transform:translate(0px,0px) rotate(0deg)
138-
}
139-
35%,65%{
140-
-webkit-transform:translate(-40px,0px) rotate(-90deg);
141-
transform:translate(-40px,0px) rotate(-90deg)
142-
}
143-
}
144-
@keyframes animsquare3{
145-
0%,15%,85%,100%{
146-
-webkit-transform:translate(0px,0px) rotate(0deg);
147-
transform:translate(0px,0px) rotate(0deg)
148-
}
149-
40%,60%{
150-
-webkit-transform:translate(-40px,0px) rotate(-90deg);
151-
transform:translate(-40px,0px) rotate(-90deg)
152-
}
153-
}
154-
@keyframes animsquare4{
155-
0%,20%,80%,100%{
156-
-webkit-transform:translate(0px,0px) rotate(0deg);
157-
transform:translate(0px,0px) rotate(0deg)
158-
}
159-
45%,55%{
160-
-webkit-transform:translate(-40px,0px) rotate(-90deg);
161-
transform:translate(-40px,0px) rotate(-90deg)
162-
}
163-
}
164116
</style>

‎components/Password.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,11 @@ export default {
115115
top 12%
116116
margin auto
117117
text-align center
118-
color #666
118+
color $textColor
119119
font-size 30px
120120
box-sizing: border-box;
121121
padding: 0 10px;
122+
text-shadow 0 2px 10px rgba(0,0,0,0.2);
122123
}
123124
.description {
124125
position: absolute;
@@ -127,10 +128,11 @@ export default {
127128
top 20%
128129
margin auto
129130
text-align center
130-
color #999
131+
color $textColor
131132
font-size 22px
132133
box-sizing: border-box;
133134
padding: 0 10px;
135+
text-shadow 0 2px 10px rgba(0,0,0,0.2);
134136
}
135137
.inputBox{
136138
max-width:700px;

‎components/Theme/index.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,12 @@ export default {
4747
margin-right: 1em;
4848
4949
.color-button {
50-
display: flex;
51-
justify-content: center;
5250
align-items: center;
5351
height: 100%;
5452
.iconfont {
5553
font-size 1.4rem
5654
color: $accentColor
5755
}
58-
.settings-icon {
59-
width: 18px;
60-
}
6156
}
6257
6358
.color-picker-menu {
@@ -116,11 +111,9 @@ export default {
116111
117112
@media (max-width: $MQMobile) {
118113
.color-picker {
119-
margin-right: 0;
120-
114+
margin-right: 1rem;
121115
.color-picker-menu {
122116
left: calc(50% - 35px);
123-
124117
&::before {
125118
left: calc(50% + 35px);
126119
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuepress-theme-reco",
3-
"version": "1.0.4",
3+
"version": "1.0.5-alpha.1",
44
"description": "this is a vuepress theme",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)
⚡