feat: loading

theme-shoka-x · Nov 12, 2023 · f2d68fa · f2d68fa
1 parent db2b635
commit f2d68fa
Show file tree

Hide file tree

Showing 5 changed files with 312 additions and 18 deletions.
diff --git a/theme/App.vue b/theme/App.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <ShokaxLoading />
+</template>
diff --git a/theme/components/ShokaxLoading.vue b/theme/components/ShokaxLoading.vue
@@ -1,25 +1,296 @@
 <template>
   <div id="loading">
     <div class="cat">
-      <div class="body">
-        <div class="head">
-          <div class="face" />
-        </div>
-        <div class="foot">
-          <div class="tummy-end" />
-          <div class="bottom" />
-          <div class="legs left" />
-          <div class="legs right" />
-        </div>
-        <div class="paw">
-          <div class="hands left" />
-          <div class="hands right" />
-        </div>
+      <div class="body" />
+      <div class="head">
+        <div class="face" />
+      </div>
+      <div class="foot">
+        <div class="tummy-end" />
+        <div class="bottom" />
+        <div class="legs left" />
+        <div class="legs right" />
+      </div>
+      <div class="paw">
+        <div class="hands left" />
+        <div class="hands right" />
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-// TODO 需要一个好心人迁移样式表
+<style lang="scss" scoped>
+@import '../styles/mixins.scss';
+
+@mixin center-center {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+@mixin tummy-style {
+  width: $tummyWidth;
+  height: $tummyWidth;
+  position: absolute;
+  border-radius: 50%;
+  background-color: $tummyColor;
+}
+
+@mixin body-color {
+  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 46%, $tummyColor 46%, $tummyColor 60%, $bodyColor 60%, $bodyColor 67%, $borderColor 67%, $borderColor 100%);
+}
+
+@mixin head-foot-color {
+  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 67%, $borderColor 67%, $borderColor 100%);
+}
+
+#loading {
+  @include fix-fullscreen;
+  background-color: #fdfdfd; // var(--grey-1);
+}
+
+$bgColor: #fdfdfd; // var(--grey-1);
+$bodyColor: rgb(237, 166, 93);
+$tailColor: rgb(198, 130, 59);
+$tummyColor: rgb(242, 192, 137);
+$borderColor: rgb(56, 60, 75);
+$innerR: 8.125em;
+$middleR: 12.8125em;
+$outerR: 15em;
+$tummyWidth: 1.5em;
+$borderWidth: .375em;
+$polygon-start: polygon(50% 50%, 0% 50%, 0% 100%, 100% 100%, 100% 20%);
+$polygon-a: polygon(50% 50%, 30% 120%, 50% 100%, 100% 100%, 100% 20%);
+$polygon-b: polygon(50% 50%, 100% 90%, 120% 90%, 100% 100%, 100% 20%);
+$polygon-middle: polygon(50% 50%, 100% 45%, 120% 45%, 120% 50%, 100% 20%);
+$polygon-c: polygon(50% 50%, 100% 65%, 120% 65%, 120% 50%, 100% 20%);
+$polygon-d: polygon(50% 50%, 75% 130%, 120% 65%, 120% 50%, 100% 20%);
+$polygon-e: polygon(50% 50%, -20% 110%, 50% 120%, 100% 100%, 100% 20%);
+
+.cat {
+  position: relative;
+  display: block;
+  width: $outerR;
+  height: 100%;
+  font-size: 10px;
+  margin: auto;
+
+  * {
+    box-sizing: content-box;
+  }
+
+  .head, .foot, .body, .paw {
+    @include center-center;
+    border-radius: 50%;
+    width: $outerR;
+    height: $outerR;
+  }
+
+  .body {
+    @include body-color;
+  }
+
+  .head:before, .foot:before {
+    @include head-foot-color;
+  }
+
+  .head {
+    &:before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 50%;
+      clip-path: polygon(100% 20%, 50% 50%, 70% -10%);
+      -webkit-clip-path: polygon(100% 20%, 50% 50%, 70% -10%);
+    }
+
+    &:after {
+      content: '';
+      width: 4.125em;
+      height: 2.5em;
+      position: absolute;
+      top: 0.8125em;
+      right: 3.9375em;
+      background-image: linear-gradient($bgColor 65%, transparent 65%), radial-gradient($bgColor 51%, $borderColor 55%, $borderColor 68%, transparent 70%);
+      transform: rotate(-66deg);
+    }
+
+    .face {
+      width: 5em;
+      height: 3.75em;
+      left: 9.0625em;
+      top: 1.8125em;
+      position: absolute;
+      transform: rotate(-47deg);
+      background: radial-gradient(circle, $tummyColor 0%, $tummyColor 23%, transparent 23%) -0.1875em 1.0625em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) 0.75em -0.75em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) -0.75em -0.75em no-repeat, radial-gradient($bodyColor 0%, $bodyColor 15%, transparent 15%) 0 -0.6875em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) -0.1875em -0.3125em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) 0.1875em -0.3125em no-repeat, radial-gradient(circle, $bodyColor 45%, transparent 45%) 0 -0.1875em, linear-gradient(transparent 35%, $borderColor 35%, $borderColor 41%, transparent 41%, transparent 44%, $borderColor 44%, $borderColor 50%, transparent 50%, transparent 53%, $borderColor 53%, $borderColor 59%, transparent 59%);
+    }
+  }
+
+  .foot {
+    &:before, &:after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+    &:before {
+      border-radius: 50%;
+      clip-path: polygon(50% 50%, 0% 50%, 0% 25%);
+      -webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25%);
+    }
+
+    .tummy-end {
+      @include tummy-style;
+      left: 1.1875em;
+      top: 6.5625em;
+    }
+
+    .bottom {
+      width: 2.1875em;
+      height: 0.9375em;
+      position: absolute;
+      top: 4.875em;
+      left: 0.75em;
+      border: 0.375em solid $borderColor;
+      border-bottom: 0;
+      border-radius: 50%;
+      transform: rotate(21deg);
+      background: $bodyColor;
+    }
+  }
+
+  .hands, .legs, .foot:after {
+    width: 0.625em;
+    height: 1.5625em;
+    position: absolute;
+    border: $borderWidth solid $borderColor;
+    background-color: $bodyColor;
+  }
+
+  .hands {
+    border-top: 0;
+    border-radius: 0 0 0.75em 0.75em;
+
+    &.left {
+      top: 4.3em;
+      left: 13.1875em;
+      transform: rotate(-20deg);
+    }
+
+    &.right {
+      top: 5.125em;
+      left: 10.975em;
+      transform: rotate(-25deg);
+    }
+  }
+
+  .legs {
+    border-bottom: 0;
+    border-radius: 0.75em 0.75em 0 0;
+
+    &.left {
+      top: 4.0625em;
+      left: 3.125em;
+      transform: rotate(25deg);
+    }
+
+    &.right {
+      top: 3.3125em;
+      left: 0.75em;
+      transform: rotate(22deg);
+    }
+  }
+
+  .foot:after {
+    width: .9em;
+    height: 2.5em;
+    top: 2.625em;
+    left: 2.5em;
+    z-index: -1;
+    transform: rotate(25deg);
+    background-color: $tailColor;
+    border-bottom: 0;
+    border-radius: 0.75em 0.75em 0 0;
+  }
+
+  animation: 2.74s linear infinite loading-cat;
+
+  .body {
+    animation: 2.74s linear infinite body;
+  }
+
+  .foot {
+    animation: 2.74s linear infinite foot;
+  }
+
+  &:hover {
+    animation-play-state: paused;
+    .body, .foot {
+      animation-play-state: paused;
+    }
+  }
+
+  &:active {
+    animation-play-state: running;
+    .body, .foot {
+      animation-play-state: running;
+    }
+  }
+}
+
+@keyframes body {
+  0% {
+    clip-path: $polygon-start;
+  }
+  10% {
+    clip-path: $polygon-a;
+  }
+  20% {
+    clip-path: $polygon-b;
+  }
+  40% {
+    clip-path: $polygon-middle;
+  }
+  50% {
+    clip-path: $polygon-middle;
+  }
+  65% {
+    clip-path: $polygon-c;
+  }
+  80% {
+    clip-path: $polygon-d;
+  }
+  90% {
+    clip-path: $polygon-e;
+  }
+  100% {
+    clip-path: $polygon-start;
+  }
+}
+
+@keyframes loading-cat {
+  0% { transform: rotate(0deg); }
+  10% { transform: rotate(-80deg); }
+  20% { transform: rotate(-180deg); }
+  40% { transform: rotate(-245deg); }
+  50% { transform: rotate(-250deg); }
+  68% { transform: rotate(-300deg); }
+  90% { transform: rotate(-560deg); }
+  100% { transform: rotate(-720deg); }
+}
+
+@keyframes foot {
+  0% { transform: rotate(-10deg); }
+  10% { transform: rotate(-100deg); }
+  20% { transform: rotate(-145deg); }
+  35% { transform: rotate(-190deg); }
+  50% { transform: rotate(-195deg); }
+  70% { transform: rotate(-165deg); }
+  100% { transform: rotate(-10deg); }
+}
 </style>
diff --git a/theme/styles/index.scss b/theme/styles/index.scss
@@ -1,2 +1,2 @@
 @use './layout' as *;
-@use './markdown' as *;
+@use './markdown' as *;
diff --git a/theme/styles/mixins.scss b/theme/styles/mixins.scss
@@ -0,0 +1,10 @@
+@use './vars' as *;
+
+@mixin fix-fullscreen {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: map-get($z-index, "5");
+}
diff --git a/theme/styles/vars.scss b/theme/styles/vars.scss
@@ -18,5 +18,12 @@ $dark: (
 ) !default;
 $dark: map.merge((), $dark);
 
-$z-index: () !default;
+$z-index: (
+  "0": -1,
+  "1": 1,
+  "2": 9,
+  "3": 99,
+  "4": 999,
+  "5": 9999,
+) !default;
 $z-index: map.merge((), $z-index);