本文参考：Akilarの糖果屋 - Akilar.top

前言

本教程针对主题版本为 butterfly 4.13.0
以gear效果作为演示

操作

添加gear效果结构文件到loading页

  1. 修改\themes\butterfly\layout\includes\loading\index.pug，替换为以下：
1
2
3
4
5
6
7
8
9
if theme.preloader.enable
  case theme.preloader.source    
    when 'gear'
      include ./load_style/gear.pug
    when 'fullpage'
      include ./load_style/fullpage-loading.pug
    default
      include ./load_style/pace.pug

注：gear .pug为当前教程中演示的效果，其余两者为主题自带效果，可根据需求自定义效果。
2. 将\themes\butterfly\layout\includes\loading\中的fullpage-loading.pug与pace.pug移动到同级目录的新建文件夹\load_style下
3. 在\themes\butterfly\layout\includes\loading\load_style\下创建gear.pug，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#loading-box
  .gear-loader
    .gear-loader_overlay
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

添加gear效果对应的css代码

修改\themes\butterfly\source\css\_layout\loading.styl添加以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
else if hexo-config('preloader.enable') && hexo-config('preloader.source') == 'gear'
  #loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 150px
    height 150px
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto



/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}

如果css代码较长，可以参考下面写法单独放置于一个文件中：

1
2
3
4
5
6
7
if hexo-config('preloader.enable')
  if hexo-config('preloader.load_style') == 'gear'
    @import './_load_style/gear'
  else if hexo-config('preloader.load_style') == 'fullpage'  
    @import './_load_style/fullpage'  
  else  
    @import './_load_style/default'

在主题配置文件中应用效果

1
2
3
4
5
6
    # Loading Animation (加載動畫)
preloader:
  enable: true # true|false
  load_color: '#000000' # '#37474f'
  load_style: gear # default|gear|fullpage
  load_image:  # url

完善

修改加载页面背景色

修改\themes\butterfly\source\css\var.styl，添加自定义修改背景色的配置项

1
2
3
4
      // preloader  
-     $preloader-bg = #37474f  
+     $preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f  
      $preloader-word-color = #fff

修正夜间模式下加载页面背景色

修改\themes\butterfly\source\css\_mode\darkmode.styl

1
2
3
4
5
6
    --search-input-color: alpha(#FFFFFF, .7)  
    --search-result-title: alpha(#FFFFFF, .9)  
-   --preloader-bg: darken(#121212, 2)  
+   --preloader-bg: darken(#ca3b3e, -2)  
    --preloader-color: alpha(#FFFFFF, .7)  
    --tab-border-color: #2c2c2c

其他

修改加载页面结束条件

使用图片作为加载页面

自定义效果