Loading组件

Posted 2022-05-18 embrace-ly

目录

Loading文件夹

• index.js
• index.less

代码详情

index.js

import React,  Component  from ‘react‘;
import ‘./index.less‘;
class Loading extends Component 
  renderType=() => 
    let type = ‘‘;
    switch (this.props.type) 
    case ‘rect-scale‘:
      type = ‘rect-scale‘;
      break;
    case ‘pie-rotate‘:
      type = ‘pie-rotate‘;
      break;
    case ‘arc-scale‘:
      type = ‘arc-scale‘;
      break;
    case ‘pie-scale-translate‘:
      type = ‘pie-scale-translate‘;
      break;
    case ‘rect-translate‘:
      type = ‘rect-translate‘;
      break;
    case ‘rect-rotate‘:
      type = ‘rect-rotate‘;
      break;
    default:
      type = ‘rect-scale‘;
      break;
    
    return `loadingBox animation-$type`;
  
  render() 
    return (
      <div className=‘loadingWrap‘>
        <div className=this.renderType()>
          <div className=‘shape shape1‘></div>
          <div className=‘shape shape2‘></div>
          <div className=‘shape shape3‘></div>
          <div className=‘shape shape4‘></div>
        </div>
      </div>
    );
  


export default Loading;

index.js

index.less

.loadingWrap
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  background: rgba(255,255,255,.5);

.loadingBox 
  position: relative;
  top: calc(50% - .2rem);
  left: calc(50% - .2rem);
  width: .4rem;
  height: .4rem;

.loadingBox.animation-rect-scale 
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);

.loadingBox.animation-pie-rotate, .loadingBox.animation-pie-scale-translate 
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);

.loadingBox.animation-pie-rotate .shape, .loadingBox.animation-pie-scale-translate .shape 
  border-radius: 5px;

.loadingBox.animation-pie-rotate, .loadingBox.animation-arc-scale, .loadingBox.animation-pie-scale-translate 
  -webkit-animation: rotation 1s infinite;
          animation: rotation 1s infinite;

.loadingBox.animation-arc-scale .shape1 
  border-top-left-radius: 10px;

.loadingBox.animation-arc-scale .shape2 
  border-top-right-radius: 10px;

.loadingBox.animation-arc-scale .shape3 
  border-bottom-left-radius: 10px;

.loadingBox.animation-arc-scale .shape4 
  border-bottom-right-radius: 10px;

.loadingBox.animation-pie-scale-translate, .loadingBox.animation-rect-translate 
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);

.loadingBox.animation-rect-translate .shape 
  width: 15px;
  height: 15px;

.loadingBox.animation-rect-rotate 
  -webkit-animation: rotation 1s infinite;
          animation: rotation 1s infinite;

.loadingBox.animation-rect-rotate .shape 
  width: 12px;
  height: 12px;
  border-radius: 2px;

.loadingBox .shape 
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 1px;

.loadingBox .shape.shape1 
  left: 0;
  background-color: #5C6BC0;

.loadingBox .shape.shape2 
  right: 0;
  background-color: #8BC34A;

.loadingBox .shape.shape3 
  bottom: 0;
  background-color: #FFB74D;

.loadingBox .shape.shape4 
  bottom: 0;
  right: 0;
  background-color: #F44336;


@-webkit-keyframes rotation 
  from 
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  
  to 
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  


@keyframes rotation 
  from 
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  
  to 
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  

.animation-rect-scale .shape1 
  -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
          animation: animation1shape1 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation1shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(16px, 16px);
            transform: translate(16px, 16px);
  


@keyframes animation1shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(16px, 16px);
            transform: translate(16px, 16px);
  

.animation-rect-scale .shape2 
  -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
          animation: animation1shape2 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation1shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-16px, 16px);
            transform: translate(-16px, 16px);
  


@keyframes animation1shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-16px, 16px);
            transform: translate(-16px, 16px);
  

.animation-rect-scale .shape3 
  -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
          animation: animation1shape3 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation1shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(16px, -16px);
            transform: translate(16px, -16px);
  


@keyframes animation1shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(16px, -16px);
            transform: translate(16px, -16px);
  

.animation-rect-scale .shape4 
  -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
          animation: animation1shape4 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation1shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-16px, -16px);
            transform: translate(-16px, -16px);
  


@keyframes animation1shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-16px, -16px);
            transform: translate(-16px, -16px);
  

.animation-pie-rotate .shape1 
  -webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
          animation: animation2shape1 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation2shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  


@keyframes animation2shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  

.animation-pie-rotate .shape2 
  -webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
          animation: animation2shape2 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation2shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
  


@keyframes animation2shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
  

.animation-pie-rotate .shape3 
  -webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
          animation: animation2shape3 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation2shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
  


@keyframes animation2shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
  

.animation-pie-rotate .shape4 
  -webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
          animation: animation2shape4 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation2shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  


@keyframes animation2shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  

.animation-arc-scale .shape1 
  -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
          animation: animation3shape1 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation3shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  


@keyframes animation3shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  

.animation-arc-scale .shape2 
  -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
          animation: animation3shape2 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation3shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  


@keyframes animation3shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  

.animation-arc-scale .shape3 
  -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
          animation: animation3shape3 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation3shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  


@keyframes animation3shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  

.animation-arc-scale .shape4 
  -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
          animation: animation3shape4 0.5s ease 0s infinite alternate;


@-webkit-keyframes animation3shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  


@keyframes animation3shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  

.animation-pie-scale-translate .shape1 
  -webkit-animation: animation4shape1 0.3s ease 0s infinite alternate;
          animation: animation4shape1 0.3s ease 0s infinite alternate;


@-webkit-keyframes animation4shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  


@keyframes animation4shape1 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  

.animation-pie-scale-translate .shape2 
  -webkit-animation: animation4shape2 0.3s ease 0.3s infinite alternate;
          animation: animation4shape2 0.3s ease 0.3s infinite alternate;


@-webkit-keyframes animation4shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  


@keyframes animation4shape2 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  

.animation-pie-scale-translate .shape3 
  -webkit-animation: animation4shape3 0.3s ease 0.3s infinite alternate;
          animation: animation4shape3 0.3s ease 0.3s infinite alternate;


@-webkit-keyframes animation4shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  


@keyframes animation4shape3 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  

.animation-pie-scale-translate .shape4 
  -webkit-animation: animation4shape4 0.3s ease 0s infinite alternate;
          animation: animation4shape4 0.3s ease 0s infinite alternate;


@-webkit-keyframes animation4shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  


@keyframes animation4shape4 
  from 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  to 
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  

.animation-rect-translate .shape1 
  animation: animation5shape1 2s ease 0s infinite reverse;


@-webkit-keyframes animation5shape1 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  
  50% 
    -webkit-transform: translate(15px, 15px);
            transform: translate(15px, 15px);
  
  75% 
    -webkit-transform: translate(15px, 0);
            transform: translate(15px, 0);
  


@keyframes animation5shape1 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  
  50% 
    -webkit-transform: translate(15px, 15px);
            transform: translate(15px, 15px);
  
  75% 
    -webkit-transform: translate(15px, 0);
            transform: translate(15px, 0);
  

.animation-rect-translate .shape2 
  animation: animation5shape2 2s ease 0s infinite reverse;


@-webkit-keyframes animation5shape2 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(-15px, 0);
            transform: translate(-15px, 0);
  
  50% 
    -webkit-transform: translate(-15px, 15px);
            transform: translate(-15px, 15px);
  
  75% 
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  


@keyframes animation5shape2 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(-15px, 0);
            transform: translate(-15px, 0);
  
  50% 
    -webkit-transform: translate(-15px, 15px);
            transform: translate(-15px, 15px);
  
  75% 
    -webkit-transform: translate(0, 15px);
            transform: translate(0, 15px);
  

.animation-rect-translate .shape3 
  animation: animation5shape3 2s ease 0s infinite reverse;


@-webkit-keyframes animation5shape3 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(15px, 0);
            transform: translate(15px, 0);
  
  50% 
    -webkit-transform: translate(15px, -15px);
            transform: translate(15px, -15px);
  
  75% 
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  


@keyframes animation5shape3 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(15px, 0);
            transform: translate(15px, 0);
  
  50% 
    -webkit-transform: translate(15px, -15px);
            transform: translate(15px, -15px);
  
  75% 
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  

.animation-rect-translate .shape4 
  animation: animation5shape4 2s ease 0s infinite reverse;


@-webkit-keyframes animation5shape4 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  
  50% 
    -webkit-transform: translate(-15px, -15px);
            transform: translate(-15px, -15px);
  
  75% 
    -webkit-transform: translate(-15px, 0);
            transform: translate(-15px, 0);
  


@keyframes animation5shape4 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, -15px);
            transform: translate(0, -15px);
  
  50% 
    -webkit-transform: translate(-15px, -15px);
            transform: translate(-15px, -15px);
  
  75% 
    -webkit-transform: translate(-15px, 0);
            transform: translate(-15px, 0);
  

.animation-rect-rotate .shape1 
  -webkit-animation: animation6shape1 2s linear 0s infinite normal;
          animation: animation6shape1 2s linear 0s infinite normal;


@-webkit-keyframes animation6shape1 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, 18px);
            transform: translate(0, 18px);
  
  50% 
    -webkit-transform: translate(18px, 18px);
            transform: translate(18px, 18px);
  
  75% 
    -webkit-transform: translate(18px, 0);
            transform: translate(18px, 0);
  


@keyframes animation6shape1 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, 18px);
            transform: translate(0, 18px);
  
  50% 
    -webkit-transform: translate(18px, 18px);
            transform: translate(18px, 18px);
  
  75% 
    -webkit-transform: translate(18px, 0);
            transform: translate(18px, 0);
  

.animation-rect-rotate .shape2 
  -webkit-animation: animation6shape2 2s linear 0s infinite normal;
          animation: animation6shape2 2s linear 0s infinite normal;


@-webkit-keyframes animation6shape2 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(-18px, 0);
            transform: translate(-18px, 0);
  
  50% 
    -webkit-transform: translate(-18px, 18px);
            transform: translate(-18px, 18px);
  
  75% 
    -webkit-transform: translate(0, 18px);
            transform: translate(0, 18px);
  


@keyframes animation6shape2 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(-18px, 0);
            transform: translate(-18px, 0);
  
  50% 
    -webkit-transform: translate(-18px, 18px);
            transform: translate(-18px, 18px);
  
  75% 
    -webkit-transform: translate(0, 18px);
            transform: translate(0, 18px);
  

.animation-rect-rotate .shape3 
  -webkit-animation: animation6shape3 2s linear 0s infinite normal;
          animation: animation6shape3 2s linear 0s infinite normal;


@-webkit-keyframes animation6shape3 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(18px, 0);
            transform: translate(18px, 0);
  
  50% 
    -webkit-transform: translate(18px, -18px);
            transform: translate(18px, -18px);
  
  75% 
    -webkit-transform: translate(0, -18px);
            transform: translate(0, -18px);
  


@keyframes animation6shape3 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(18px, 0);
            transform: translate(18px, 0);
  
  50% 
    -webkit-transform: translate(18px, -18px);
            transform: translate(18px, -18px);
  
  75% 
    -webkit-transform: translate(0, -18px);
            transform: translate(0, -18px);
  

.animation-rect-rotate .shape4 
  -webkit-animation: animation6shape4 2s linear 0s infinite normal;
          animation: animation6shape4 2s linear 0s infinite normal;


@-webkit-keyframes animation6shape4 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, -18px);
            transform: translate(0, -18px);
  
  50% 
    -webkit-transform: translate(-18px, -18px);
            transform: translate(-18px, -18px);
  
  75% 
    -webkit-transform: translate(-18px, 0);
            transform: translate(-18px, 0);
  


@keyframes animation6shape4 
  0% 
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  
  25% 
    -webkit-transform: translate(0, -18px);
            transform: translate(0, -18px);
  
  50% 
    -webkit-transform: translate(-18px, -18px);
            transform: translate(-18px, -18px);
  
  75% 
    -webkit-transform: translate(-18px, 0);
            transform: translate(-18px, 0);
  

@media screen and (max-width: 600px) 
  .content 
    align-content: flex-start;
  
  .content .column 
    width: calc(50% - 30px);
  

@media screen and (max-width: 400px) 
  .content 
    align-content: flex-start;
  
  .content .column 
    width: calc(100% - 30px);
  

index.less

使用方法

1、import 引入Loading组件

2、<Loading type=‘rect-rotate‘></Loading>

props

type：需要的loading类型，共6种，默认情况为rect-scale

rect-scale

pie-rotate

arc-scale

pie-scale-translate

rect-translate

rect-rotate