Feat: CSS 实现 Postman loading 效果

src/components/AsideToggler/index.vue

@@ -25,7 +25,7 @@
  * 设置 dragElementClass 为【父组件】中可拖动的元素的 class，然后在【父组件】引入该组件即可
  * @example
  * <el-aside v-show="!isCollapse" class="drag-element"> ... </el-aside>
- * <aside-toggler :is-collapse="isCollapse" drag-element-class="drag-element" />
+ * <aside-toggler :is-collapse.sync="isCollapse" drag-element-class="drag-element" />
  */
 export default {
   name: 'AsideToggler',

src/components/LoadingIndicator.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="loading-indicator-wrapper">
+    <div class="aether-spinner">
+      <div class="rect-one" />
+      <div class="rect-two" />
+      <div class="rect-three" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingIndicator',
+}
+</script>
+
+<style lang="scss" scoped>
+.loading-indicator-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 20px;
+
+  .aether-spinner {
+    display: flex;
+    justify-content: space-between;
+    width: var(--as-size, 16px);
+    height: var(--as-size, 16px);
+    text-align: center;
+    font-size: var(--as-font-size, 10px);
+
+    > div {
+      height: 100%;
+      width: 4px;
+      background-color: var(--as-content-color-tertiary, #a6a6a6);
+      opacity: 0.2;
+      border-radius: var(--as-border-radius-default, 4px);
+      animation: spinner-bounce 0.6s infinite ease-in-out;
+      transform-origin: center;
+    }
+    .rect-two {
+      animation-delay: 0.15s;
+    }
+    .rect-three {
+      animation-delay: 0.3s;
+    }
+  }
+}
+
+@keyframes spinner-bounce {
+  0%,
+  100% {
+    transform: scaleY(0.4);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+</style>

src/router.js

@@ -71,6 +71,12 @@ const routes = [
     meta: { description: 'icon 使用范例' },
     component: () => import(/* webpackChunkName: "icons" */ '@/views/icons'),
   },
+  {
+    path: '/loading-indicator',
+    name: 'loadingIndicator',
+    meta: { description: 'CSS 实现 Postman loading 效果' },
+    component: () => import(/* webpackChunkName: "loadingIndicator" */ '@/views/loading-indicator'),
+  },
   {
     path: '/minder-editor',
     name: 'minderEditor',

src/views/loading-indicator.vue

@@ -0,0 +1,17 @@
+  <!-- CSS 实现 Postman loading 效果 -->
+<template>
+  <div style="height: 100%;">
+    <LoadingIndicator />
+  </div>
+</template>
+
+<script>
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+export default {
+  name: 'LoadingIndicatorView',
+  components: {
+    LoadingIndicator,
+  }
+}
+</script>
+