当前位置：首页 > news >正文

css之loading旋转加载

news 2025/4/21 7:43:29

1.效果
在这里插入图片描述
2.代码

	<!-- 检测动画 --><view class="sk-chase"><view class="sk-chase-dot"></view><view class="sk-chase-dot"></view><view class="sk-chase-dot"></view><view class="sk-chase-dot"></view><view class="sk-chase-dot"></view><view class="sk-chase-dot"></view></view><style>// 检测等待动画.sk-chase {width: 40px;height: 40px;position: relative;animation: sk-chase 2.5s infinite linear both;}.sk-chase-dot {width: 100%;height: 100%;position: absolute;left: 0;top: 0;animation: sk-chase-dot 2.0s infinite ease-in-out both;}.sk-chase-dot:before {content: '';display: block;width: 25%;height: 25%;background-color: #1677FF;border-radius: 100%;animation: sk-chase-dot-before 2.0s infinite ease-in-out both;}.sk-chase-dot:nth-child(1) {animation-delay: -1.1s;}.sk-chase-dot:nth-child(2) {animation-delay: -1.0s;}.sk-chase-dot:nth-child(3) {animation-delay: -0.9s;}.sk-chase-dot:nth-child(4) {animation-delay: -0.8s;}.sk-chase-dot:nth-child(5) {animation-delay: -0.7s;}.sk-chase-dot:nth-child(6) {animation-delay: -0.6s;}.sk-chase-dot:nth-child(1):before {animation-delay: -1.1s;}.sk-chase-dot:nth-child(2):before {animation-delay: -1.0s;}.sk-chase-dot:nth-child(3):before {animation-delay: -0.9s;}.sk-chase-dot:nth-child(4):before {animation-delay: -0.8s;}.sk-chase-dot:nth-child(5):before {animation-delay: -0.7s;}.sk-chase-dot:nth-child(6):before {animation-delay: -0.6s;}@keyframes sk-chase {100% {transform: rotate(360deg);}}@keyframes sk-chase-dot {80%,100% {transform: rotate(360deg);}}@keyframes sk-chase-dot-before {50% {transform: scale(0.4);}100%,0% {transform: scale(1.0);}}
</style>