html等待中动画,等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】

缘起：

今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？css

仍是？长这样？

简直让我脑洞大开。。html

其实呐，他说的是这个。。

等待状态，我心里 

antd

好了，那怎么实现呐spa

第一反应：gif

找个gif 图好麻烦~调试

想了想、、必定有别的解决方式。code

第二反应：看别的怎么作

第一个想起来宠幸的就是Antd，毕竟是我用的最多的库~component

来咱们去看看antd的loading怎么作的，点进去发现，它不叫loading~叫Spin~orm

来~看看怎么实现的吧~htm

超简单~ 只须要 HTML + CSSblog

.ant-spin-dot {

position: relative;

display: inline-block;

font-size: 20px;

width: 20px;

height: 20px;

}

.ant-spin-dot-spin{

transform: rotate(45deg);

animation: antRotate 1.2s infinite linear;

}

.ant-spin-dot i {

width: 9px;

height: 9px;

border-radius: 100%;

background-color: #1890ff;

transform: scale(0.75);

display: block;

position: absolute;

opacity: 0.3;

animation: antSpinMove 1s infinite linear alternate;

transform-origin: 50% 50%;

&:nth-child(1) {

left: 0;

top: 0;

}

&:nth-child(2) {

right: 0;

top: 0;

animation-delay: 0.4s;

}

&:nth-child(3) {

right: 0;

bottom: 0;

animation-delay: 0.8s;

}

&:nth-child(4) {

left: 0;

bottom: 0;

animation-delay: 1.2s;

}

}

@keyframes antSpinMove {

to {

opacity: 1;

}

}

@keyframes antRotate {

to {

transform: rotate(405deg);

}

}

资料库：