四叶草loading组件

概述

日常开放当中，当我们网速过慢，请求接口就会很慢，因此必不可少的就会使用loading组件来反馈当前数据请求的状态，loading组件多种多样，好看的更不计其数，组件库也基本都有，在此分享一个四叶草loading组件。

vue模板

<template>
  <div class="comon-loading-component">
    <div class="line-animate-wrap">
      <span class="line-animates"></span>
      <span class="line-animates"></span>
      <span class="line-animates"></span>
      <span class="line-animates"></span>
    </div>
    <p class="loading-text">{{ text }}</p>
  </div>
</template>

css样式

<style lang="less" scoped>
  .comon-loading-component {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .loading-text {
      font-style: 12px;
      color: #666;
    }
    .line-animate-wrap {
      height: 100%;
      width: 76px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      top: 45%;
      margin: 0 auto;
      transform-origin: center center;
      animation: rotate 1.3s linear infinite;
    }
    .line-animates {
      width: 25px;
      height: 25px;
      margin: 3px;
    }
    .line-animates:nth-child(1) {
      background-color: #e5efc1;
      border-radius: 50% 50% 0 50%;
    }
    .line-animates:nth-child(2) {
      background-color: #a2dfab;
      border-radius: 50% 50% 50% 0;
    }
    .line-animates:nth-child(3) {
      background-color: #39aea9;
      border-radius: 50% 0 50% 50%;
    }
    .line-animates:nth-child(4) {
      background-color: #557b83;
      border-radius: 0 50% 50% 50%;
    }
  }
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
</style>

效果图