实现一个沙漏⏳组件

一个用于过渡的加载组件,效果图:

技术栈

vue
css,html

实现思路

1.沙漏主体设计

<template>
  <div class="hour-container" >
     <div class="upper-tap"></div>
     <div class="middle-tap">
       <div class="upper-half-container">
         <div class="upper-half-content">
           <div class="upper-sand" >
             <div class="sand-reduce"></div>
           </div>
         </div>
       </div>
       <div class="lower-half-container">
         <div class="lower-half-content">
            <div class="lower-sand">
             <div class="sand-add"></div>
           </div>
         </div>
       </div>
     </div>
     <div class="sand-falling">
       <div class="sand-null"></div>
     </div>
     <div class="bottom-tap"></div>
  </div>
</template>
复制代码

如上图分为三个部分:上板、下板、中部; 中部又分为上半沙漏和下半沙漏, 我以上半沙漏为例:

<div class="upper-half-container">
    <div class="upper-half-content">
       <div class="upper-sand" >
         <div class="sand-reduce"></div>
       </div>
    </div>
</div>
复制代码

.upper-half-container{ /*上下沙漏各占一半,overflow: hidden*/
    width: 100%;
    height: 50%;
    overflow: hidden;
    position: relative;
  }
.upper-half-content{ /*通过border-radius,width,height形成椭圆,加上border*/
    position: absolute;
    border: 3px solid rgb(248, 248, 250);
    border-radius: 50%;
    height: 105px;
    width: 50px;
    top: -53px;
    left: 2px;
    box-shadow: 2px 1px 3px 0px #aaa;
  }
.upper-sand{  /*里面的沙子,overflow: hidden*/
    width: 100%;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    border-radius: 50%;
    top: 0px;
    overflow: hidden;
  }
.sand-reduce{ /*通过动画控制height,来体现沙子减少*/
    height: 60%;
    width: 100%;
    background-color: #fff;
    animation: sand-reduce 4s linear infinite;
  }
  @keyframes sand-reduce{  /*动画*/
   0%{
     height: 65%;
   }
   25%{
     height: 78%;
   }
   40%{
     height: 89%;
   }
   62.5%{
     height: 100%;
   }
   80%{
     height: 100%;
   }
   100%{
     height: 100%;
   }
 }
复制代码

2.动画效果

主要有4个动画: 上沙漏减少 、 下沙漏增加 、 下落的沙子 、 沙漏的旋转

原理和上面的 上沙漏 基本相同

<div class='parent'>
    <div class='child'></div>
</div>
复制代码

沙子的增加或减少: 通过动画控制子元素的高度体现增加和减少

比较关键的是: 控制4个动画的衔接

我定了一个动画的周期为 4s :

• 上沙漏减少 在 0s~2.5s 减少, 2.5~4s 不变
• 下沙漏增加 在 0s~0.5s 不变, 0.5~3s 增加, 3s~4s 不变
• 下落的沙子 在 0s~0.5s 增加, 0.5~2.5s 不变, 2.5s~3s 减少, 3s~4s 不变
• 沙漏的旋转 在 0s~3s 不变, 3~4s 旋转

说明

该组件基于 vue , 收录在我的 jk -ui 库的 Loading模块 下, 演示文档

你也可以通过 npm run --save jk-ui
<j-hour></j-hour> 使用

具体源码

觉得有用的话,欢迎 Star , 感谢:pray: