loading

1.纯CSS实现各种loading

loading1

.base_loading1 {
  display: flex;
  width: 36px;
  height: 36px;
  margin: 0 auto 15px;
  border: 3px solid transparent;
  border-top-color: #1890ff;
  border-bottom-color: #1890ff;
  border-radius: 50%;
  animation: loading1-0 0.8s linear infinite;
}

.base-loading1::before {
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  content: '';
  border: 3px solid #1890ff;
  border-radius: 50%;
  animation: loading1 0.5s alternate ease-in infinite;
}

@keyframes loading1-0 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading1 {
  from {
    transform: scale(0.5);
  }

  to {
    transform: scale(1.2);
  }
}

loading2

.base_loading2 {
  width: 20px;
  height: 20px;
  margin-top: -40px;
  margin-left: -10px;
  animation: loading2 1s linear reverse infinite;
}

.base_loading2::before {
  display: block;
  width: 36px;
  height: 36px;
  margin-top: -17px;
  margin-left: -18px;
  content: '';
  animation: loading2 0.4s linear infinite;}

.base_loading2::after {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  margin-left: -4px;
  content: '';
  animation: loading2 0.4s linear infinite;}

.base_loading2::before,
.base_loading2,
.base_loading2::after {
  position: absolute;
  top: 40%;
  left: 50%;
  border: 3px solid transparent;
  border-top-color: #1890ff;
  border-right-color: #1890ff;  border-radius: 50%;
}

@keyframes loading2 {  to {
    transform: rotate(360deg);
  }
}

loading3

.base_loading3 {
  display: inline-block;
  width: 2.5em;
  height: 3em;
  margin-bottom: 15px;
  border: 3px solid transparent;
  border-top-color: #1890ff;
  border-bottom-color: #1890ff;
  border-radius: 50%;
  animation: loading3 2s ease infinite;
}

@keyframes loading3 {
  50% {
    border-width: 8px;
    transform: rotate(360deg) scale(0.4, 0.33);
  }

  100% {
    border-width: 3px;
    transform: rotate(720deg) scale(1, 1);
  }
}

loading4

.base_loading4 {  
    display: inline-block;  
    width: 30px;  
    height: 30px;  
    margin: 0 auto 10px;  
    border: 8px solid transparent;  
    border-bottom-color: #1890ff;  
    border-left-color: #1890ff;  
border-radius: 50%; 
 animation: loading4 1s linear infinite normal;
}
.base_loading4::after {  
    display: block; 
    width: 15px; 
    height: 15px; 
    margin: 0; 
    content: ' '; 
    border: 6px solid #1890ff; 
    border-bottom-color: transparent;  
    border-left-color: transparent; 
    border-radius: 50%;
}
@keyframes loading4 { 
 0% {    
     opacity: 0.2;    
     transform: rotate(0deg); 
 }  
 50% {   
     opacity: 1;  
     transform: rotate(180deg);
  } 
 100% {    
     opacity: 0.2; 
     transform: rotate(360deg); 
 }
}

loading5

.base_loading5 {  
    display: block;  
    width: 0;  
    height: 0;  
    margin: 0 auto 15px;  
    border: solid 1.5em #1890ff;  
    border-right: solid 1.5em transparent;  
    border-left: solid 1.5em transparent;  
    border-radius: 100%;  
    animation: loading5 1s linear infinite;
}
@keyframes loading5 {  
    0% {    
        transform: rotate(0deg);  
    }  
    50% {    
        transform: rotate(60deg);  
    }  
    100% {    
        transform: rotate(360deg);  
    }
}

loading6

.base_loading6 {  
    display: block;  
    width: 0;  
    height: 0;  
    margin: 0 auto 25px auto;  
    perspective: 200px;
}
.base_loading6::before,
.base_loading6::after {  
    position: absolute;  
    width: 20px;  
    height: 20px;  
    content: '';  
    background: rgba(0, 0, 0, 0);  
    animation: loading6 0.5s infinite alternate;
}
.base_loading6::before {  
    left: 0;
}
.base_loading6::after {  
    right: 0;  
    animation-delay: 0.15s;
}
@keyframes loading6 {  
    0% {    
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);    
        transform: scale(1) translateY(0) rotateX(0deg);  
    }  
    100% {    
        background: #1890ff;    
        box-shadow: 0 25px 40px rgba(24,144,255, 0.5);    
        transform: scale(1.2) translateY(-25px) rotateX(45deg);  
    }
}

loading7

.base_loading7 {  
    position: relative;      
    box-sizing: border-box;  
    display: block;  
    width: 20px;  
    height: 20px;  
    margin: 0 auto 15px auto;  
    background-color: #1890ff;  
    border-radius: 50%;  
    box-shadow: 30px 0 0 0 #1890ff;  
    transform: translateX(-15px);
}
.base_loading7::after {  
    position: absolute;  
    top: 8px;  left: 9px;  
    width: 10px;  
    height: 10px;  
    content: '';  
    background-color: #fff;  
    border-radius: 50%;  
    box-shadow: 30px 0 0 0 #fff;  
    animation: loading7 2s ease-in-out infinite alternate;
}
@keyframes loading7 {  
    0% {    
        left: 9px;  
    }  
    100% {    
        left: 1px;  
    }
}

loading8

.base_loading8 {  
    position: relative;  
    box-sizing: border-box;  
    display: block;  
    width: 20px;  
    height: 20px;  
    margin: 0 auto 15px auto;  
    border: 1px #1890ff solid;  
    animation: loading8 5s linear infinite;
}
.base_loading8::after {  
    position: absolute;  
    top: -8px;  
    left: 0;  
    width: 4px;  
    height: 4px;  
    content: '';  
    background-color: #1890ff;  
    animation: loading8_check 1s ease-in-out infinite;
}
@keyframes loading8_check {  
    25% {    
        top: -8px;    
        left: 22px;  
    }  
    50% {    
        top: 22px;    
        left: 22px;  
    }  
    75% {    
        top: 22px;    
        left: -9px;  
    }  
    100% {    
        top: -7px;    
        left: -9px;  
    }
}
@keyframes loading8 {  
    0% {    
        box-shadow: inset 0 0 0 0 rgba(24,144,255, 0.5);
        opacity: 0.5; 
    }  
    100% {    
        box-shadow: inset 0 -20px 0 0 #1890ff;  
    }
}

loading9(element同款)

.base_loading9::after {
  right: 0;
  animation-delay: 0.15s;
}

@keyframes loading9 {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform: scale(1) translateY(0) rotateX(0deg);
  }

  100% {
    background: #1890ff;
    box-shadow: 0 25px 40px rgba(24,144,255,0.5);
    transform: scale(1.2) translateY(-25px) rotateX(45deg);
  }
}

.base_loading9 {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 auto 15px auto;
  border: 2px solid #1890ff;
  border-top-color: rgba(24,144,255, 0.2);
  border-right-color: rgba(24,144,255, 0.2);
  border-bottom-color: rgba(24,144,255, 0.2);
  border-radius: 100%;
  animation: loading9 infinite 0.75s linear;
}

@keyframes loading9 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

2.在elementUI中封装使用

import { Loading } from 'element-ui';
import Vue from  'vue'
Vue.prototype.$baseLoding = (class, text) => {
    return Loading.service({
        lock: true,        
        text: text || '数据加载中...',        
        spinner: class, // class即上面的类名，如base_loading9 
        background: 'hsla(0,0%,100%,.8)',    
    })
}