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

-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  #icat-splash
+    .icat-loading
+      img(src=url_for(theme.preloader.logo) data-src=url_for(theme.preloader.logo_dark))

script.
+  var htmlElement = document.querySelector('html');
+  if (htmlElement.getAttribute('data-theme') === 'dark') {
+    var imgElement = document.querySelector('.icat-loading img');
+    var dataSrc = imgElement.getAttribute('data-src');
+    imgElement.src = dataSrc;
+  }
+  
  const preloader = {
    endLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
+
+  preloader.initLoading()
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

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

if hexo-config('preloader')
  #loading-box.loaded
    #icat-splash
      opacity: 0
      z-index: -1000

  #icat-splash
    display: -webkit-box
    display: -moz-box
    display: -webkit-flex
    display: -ms-flexbox
    display: box
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100%
    position: fixed
    background: var(--icat-card-bg)
    z-index: 1999
    opacity: 1
    -ms-filter: none
    filter: none
    -webkit-transition: .3s
    -moz-transition: .3s
    -o-transition: .3s
    -ms-transition: .3s
    transition: .3s

    .icat-loading
      width: 30%
      height: auto
      overflow: hidden
      display: flex
      justify-content: center
      position: relative

      @media screen and (max-width: 768px)
        width: 50%
      
      img
        width: 100%
        height: auto
        -webkit-filter: brightness(1)
        -moz-filter: brightness(1)
        -o-filter: brightness(1)
        -ms-filter: brightness(1)
        filter: brightness(1)

      &::before
        content: ""
        display: inline-block
        width: 100%
        height: 400%
        background-image: linear-gradient(to bottom, #FCFCFC, #FCFCFC 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #FCFCFC 75%, #FCFCFC)
        background-position: center top
        position: absolute
        top: 0
        animation-name: loading
        animation-delay: 0.5s
        animation-duration: 4s
        animation-iteration-count: infinite
        animation-timing-function: linear

        [data-theme="dark"]
          background-image: linear-gradient(to bottom, #1d1e22, #1d1e22 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #1d1e22 75%, #1d1e22)

  @keyframes loading
    from
      top: 0
    to
      top: -300%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  ···




preloader:
  enable: true
  source: 1
  
  
  pace_css_url:
+  logo: https://s11.ax1x.com/2023/07/28/pCxGRfg.png
+  logo_dark: https://s11.ax1x.com/2023/07/28/pCxG2tS.png
  

  ···

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

-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  .loading-bg
+    div.loading-img(style=`background-image:url(${theme.preloader.avatar});background-repeat: no-repeat;background-position:center;`)
+    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
+
+  preloader.initLoading()
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

1
2
3
4
5
6
7

if theme.preloader.source === 1
  include ./fullpage-loading.pug
+else if theme.preloader.source === 2
+  include ./pace.pug
else
+  include ./fullpage-loading.pug
  include ./pace.pug

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

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 10px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 4rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden;
}
.pace-inactive .pace-progress {
    opacity: 0;
    transition: 0.3s ease-in;
}
.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: gradient 1.5s ease infinite;
    background-size: 200%;
}
.pace.pace-inactive {
    opacity: 0;
    transition: 0.3s;
    top: -8px;
}
@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

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

if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--icat-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      background-size: cover;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  ···




preloader:
  enable: true
  source: 3
  
  
  pace_css_url: /css/icat_change.css
+  avatar: https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg
  

  ···