纯css实现手机端loading

纯css实现手机端loading

.sk-fading-circle {width: 40px;height: 40px;position: relative;}.sk-fading-circle .sk-circle {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.sk-fading-circle .sk-circle:before {content: "";display: block;margin: 0 auto;width: 15%;height: 15%;background-color: #bfaca6;border-radius: 100%;-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;}.sk-fading-circle .sk-circle2 {-webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);transform: rotate(30deg);}.sk-fading-circle .sk-circle3 {-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg);}.sk-fading-circle .sk-circle4 {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}.sk-fading-circle .sk-circle5 {-webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);transform: rotate(120deg);}.sk-fading-circle .sk-circle6 {-webkit-transform: rotate(150deg);-ms-transform: rotate(150deg);transform: rotate(150deg);}.sk-fading-circle .sk-circle7 {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}.sk-fading-circle .sk-circle8 {-webkit-transform: rotate(210deg);-ms-transform: rotate(210deg);transform: rotate(210deg);}.sk-fading-circle .sk-circle9 {-webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);transform: rotate(240deg);}.sk-fading-circle .sk-circle10 {-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg);}.sk-fading-circle .sk-circle11 {-webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);transform: rotate(300deg);}.sk-fading-circle .sk-circle12 {-webkit-transform: rotate(330deg);-ms-transform: rotate(330deg);transform: rotate(330deg);}.sk-fading-circle .sk-circle2:before {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.sk-fading-circle .sk-circle3:before {-webkit-animation-delay: -1s;animation-delay: -1s;}.sk-fading-circle .sk-circle4:before {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}.sk-fading-circle .sk-circle5:before {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}.sk-fading-circle .sk-circle6:before {-webkit-animation-delay: -0.7s;animation-delay: -0.7s;}.sk-fading-circle .sk-circle7:before {-webkit-animation-delay: -0.6s;animation-delay: -0.6s;}.sk-fading-circle .sk-circle8:before {-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.sk-fading-circle .sk-circle9:before {-webkit-animation-delay: -0.4s;animation-delay: -0.4s;}.sk-fading-circle .sk-circle10:before {-webkit-animation-delay: -0.3s;animation-delay: -0.3s;}.sk-fading-circle .sk-circle11:before {-webkit-animation-delay: -0.2s;animation-delay: -0.2s;}.sk-fading-circle .sk-circle12:before {-webkit-animation-delay: -0.1s;animation-delay: -0.1s;}@-webkit-keyframes sk-circleFadeDelay {0%,39%,100% {opacity: 0;}40% {opacity: 1;}}@keyframes sk-circleFadeDelay {0%,39%,100% {opacity: 0;}40% {opacity: 1;}}.tips—loading {font-size: 13px;margin-top: 10px;color: #bfaca6;}.loadingWrap{background-color: #46392d;border-radius: 10px;width: 120px;height: 120px;display: flex;justify-content: center;flex-direction: column;align-items: center;position: absolute;top: 40%;left: 50%;/* display: none; */z-index: 999999;transform: translate(-50%,-50%);}生成中...

效果

第二套

.loading {width: 30px;height: 30px;border-radius: 50%;border: 2px solid #fff;border-left: 2px solid rgba(0, 0, 0, 0);animation: loading 2s linear infinite;}@keyframes loading {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.tips—loading {font-size: 13px;margin-top: 20px;color: #fff;}.loadingWrap{background-color: rgba(0, 0, 0, .5);border-radius: 10px;width: 120px;height: 120px;display: flex;justify-content: center;flex-direction: column;align-items: center;position: absolute;top: 40%;left: 50%;/* display: none; */z-index: 999999;transform: translate(-50%,-50%);}生成中...

效果 （带动画）