12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- .lds-default {
- display: inline-block;
- position: relative;
- width: 64px;
- height: 64px;
- }
- .lds-default view {
- position: absolute;
- width: 5px;
- height: 5px;
- background: #42b983;//可修改颜色
- border-radius: 50%;
- animation: lds-default 1.2s linear infinite;
- }
- .lds-default view:nth-child(1) {
- animation-delay: 0s;
- top: 29px;
- left: 53px;
- }
- .lds-default view:nth-child(2) {
- animation-delay: -0.1s;
- top: 18px;
- left: 50px;
- }
- .lds-default view:nth-child(3) {
- animation-delay: -0.2s;
- top: 9px;
- left: 41px;
- }
- .lds-default view:nth-child(4) {
- animation-delay: -0.3s;
- top: 6px;
- left: 29px;
- }
- .lds-default view:nth-child(5) {
- animation-delay: -0.4s;
- top: 9px;
- left: 18px;
- }
- .lds-default view:nth-child(6) {
- animation-delay: -0.5s;
- top: 18px;
- left: 9px;
- }
- .lds-default view:nth-child(7) {
- animation-delay: -0.6s;
- top: 29px;
- left: 6px;
- }
- .lds-default view:nth-child(8) {
- animation-delay: -0.7s;
- top: 41px;
- left: 9px;
- }
- .lds-default view:nth-child(9) {
- animation-delay: -0.8s;
- top: 50px;
- left: 18px;
- }
- .lds-default view:nth-child(10) {
- animation-delay: -0.9s;
- top: 53px;
- left: 29px;
- }
- .lds-default view:nth-child(11) {
- animation-delay: -1s;
- top: 50px;
- left: 41px;
- }
- .lds-default view:nth-child(12) {
- animation-delay: -1.1s;
- top: 41px;
- left: 50px;
- }
- @keyframes lds-default {
- 0%, 20%, 80%, 100% {
- transform: scale(1);
- }
- 50% {
- transform: scale(1.5);
- }
- }
|