123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- .lds-grid {
- position: absolute;
- display: block;
- left: calc(50% - 40px);
- top: calc(50% - 90px);
- width: 80px;
- height: 80px;
- }
- .lds-grid div {
- position: absolute;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- background: #737374;
- animation: lds-grid 1.2s linear infinite;
- }
- .lds-grid div:nth-child(1) {
- top: 8px;
- left: 8px;
- animation-delay: 0s;
- }
- .lds-grid div:nth-child(2) {
- top: 8px;
- left: 32px;
- animation-delay: -0.4s;
- }
- .lds-grid div:nth-child(3) {
- top: 8px;
- left: 56px;
- animation-delay: -0.8s;
- }
- .lds-grid div:nth-child(4) {
- top: 32px;
- left: 8px;
- animation-delay: -0.4s;
- }
- .lds-grid div:nth-child(5) {
- top: 32px;
- left: 32px;
- animation-delay: -0.8s;
- }
- .lds-grid div:nth-child(6) {
- top: 32px;
- left: 56px;
- animation-delay: -1.2s;
- }
- .lds-grid div:nth-child(7) {
- top: 56px;
- left: 8px;
- animation-delay: -0.8s;
- }
- .lds-grid div:nth-child(8) {
- top: 56px;
- left: 32px;
- animation-delay: -1.2s;
- }
- .lds-grid div:nth-child(9) {
- top: 56px;
- left: 56px;
- animation-delay: -1.6s;
- }
- .lds-grid div:nth-child(10) {
- display: none;
- }
- .lds-grid div:nth-child(11) {
- display: none;
- }
- .lds-grid div:nth-child(12) {
- display: none;
- }
- @keyframes lds-grid {
- 0%, 100% {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
- }
|