apex-loading-animation

加载动画

Usage no npm install needed!

<script type="module">
  import apexLoadingAnimation from 'https://cdn.skypack.dev/apex-loading-animation';
</script>

README

加载动画

介绍

仅支持react 16.8+

Installation

npm i apex-loading-animation --save

Properties

公共属性

Prop Default Type Description
color ... string 颜色
time 1.5 number 动画时长
size 1 number 组件缩放比

LoadingG

Prop Default Type Description
liSize 11 number 加载长方形个数
liWidth 5 number 加载长方形的宽
liHeight 15 number 加载长方形的长
innerRingRadius 10 number 内圆半径

LoadingH

Prop Default Type Description
liSize 5 number 小圆点个数

LoadingI

Prop Default Type Description
innerColor #85933C number 内圆颜色

Use

import React from 'react';
import {
  LoadingA,
  LoadingB,
  LoadingC,
  LoadingD,
  LoadingE,
  LoadingF,
  LoadingG,
  LoadingH,
  LoadingI,
} from 'apex-loading-animation'
import 'apex-loading-animation/build/index.css';   // 引入css

export default () => {

  return <div
    style={{
      display:'flex',
      flexWrap:'wrap'
    }}
  >
    <div style={{width: '33%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingA /><p style={{textAlign:'center', marginTop:5}}>LoadingA</p></div>
    <div style={{width: '33%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingB /><p style={{textAlign:'center', marginTop:5}}>LoadingB</p></div>
    <div style={{width: '33%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingC /><p style={{textAlign:'center', marginTop:5}}>LoadingC</p></div>
    <div style={{width: '39%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingD /><p style={{textAlign:'center', marginTop:5}}>LoadingD</p></div>
    <div style={{width: '60%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingE /><p style={{textAlign:'center', marginTop:5}}>LoadingE</p></div>
    <div style={{width: '50%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingF /><p style={{textAlign:'center', marginTop:5}}>LoadingF</p></div>
    <div style={{width: '49%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingG /><p style={{textAlign:'center', marginTop:5}}>LoadingG</p></div>
    <div style={{width: '49%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingH /><p style={{textAlign:'center', marginTop:5}}>LoadingH</p></div>
    <div style={{width: '50%',borderLeft: '1px solid #000000',borderBottom:'1px solid #000000',height: 90, display:'flex',justifyContent:'center', alignItems:'center', flexDirection:'column'}}><LoadingI /><p style={{textAlign:'center', marginTop:5}}>LoadingI</p></div>
  </div>
}