css3 loading

2024年5月16日 108次阅读 来源: yr1014

css

/*loading动画*/
#pageLoading{width: 40px;height: 40px;position: fixed;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;}
#pageLoading div {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#pageLoading div:before {content: '';display: block;margin: 0 auto;width: 15%;height: 15%;background-color: #eee;border-radius: 100%;}
#pageLoading .sk-circle1 { transform: rotate(45deg);}
#pageLoading .sk-circle2 { transform: rotate(90deg);}
#pageLoading .sk-circle3 { transform: rotate(135deg);}
#pageLoading .sk-circle4 { transform: rotate(180deg);}
#pageLoading .sk-circle5 { transform: rotate(225deg);}
#pageLoading .sk-circle6 { transform: rotate(270deg);}
#pageLoading .sk-circle7 { transform: rotate(315deg);}
@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
#pageLoading .sk-circle:before {
  animation: sk-circleFadeDelay 0.8s infinite ease-in-out both;
}
#pageLoading .sk-circle0:before { animation-delay: -0.8s; }
#pageLoading .sk-circle1:before { animation-delay: -0.7s; }
#pageLoading .sk-circle2:before { animation-delay: -0.6s; }
#pageLoading .sk-circle3:before { animation-delay: -0.5s; }
#pageLoading .sk-circle4:before { animation-delay: -0.4s; }
#pageLoading .sk-circle5:before { animation-delay: -0.3s; }
#pageLoading .sk-circle6:before { animation-delay: -0.2s; }
#pageLoading .sk-circle7:before { animation-delay: -0.1s; }

dom

<div id="pageLoading" class="page_loading_animation">
    <div class="sk-circle sk-circle0"></div>
    <div class="sk-circle sk-circle1"></div>
    <div class="sk-circle sk-circle2"></div>
    <div class="sk-circle sk-circle3"></div>
    <div class="sk-circle sk-circle4"></div>
    <div class="sk-circle sk-circle5"></div>
    <div class="sk-circle sk-circle6"></div>
    <div class="sk-circle sk-circle7"></div>
</div>
    原文作者：yr1014
    原文地址: https://segmentfault.com/a/1190000009985582
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞