做个沙漏

前言

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

技术栈

• 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>