This post is saved as a draft.
#212121
1@keyframes square-animation { 2 0% { 3 left: 0; 4 top: 0; 5 } 6 7 10.5% { 8 left: 0; 9 top: 0; 10 } 11 12 12.5% { 13 left: 32px; 14 top: 0; 15 } 16 17 23% { 18 left: 32px; 19 top: 0; 20 } 21 22 25% { 23 left: 64px; 24 top: 0; 25 } 26 27 35.5% { 28 left: 64px; 29 top: 0; 30 } 31 32 37.5% { 33 left: 64px; 34 top: 32px; 35 } 36 37 48% { 38 left: 64px; 39 top: 32px; 40 } 41 42 50% { 43 left: 32px; 44 top: 32px; 45 } 46 47 60.5% { 48 left: 32px; 49 top: 32px; 50 } 51 52 62.5% { 53 left: 32px; 54 top: 64px; 55 } 56 57 73% { 58 left: 32px; 59 top: 64px; 60 } 61 62 75% { 63 left: 0; 64 top: 64px; 65 } 66 67 85.5% { 68 left: 0; 69 top: 64px; 70 } 71 72 87.5% { 73 left: 0; 74 top: 32px; 75 } 76 77 98% { 78 left: 0; 79 top: 32px; 80 } 81 82 100% { 83 left: 0; 84 top: 0; 85 } 86} 87 88.loader { 89 position: relative; 90 width: 96px; 91 height: 96px; 92 transform: rotate(45deg); 93} 94 95.loader-square { 96 position: absolute; 97 top: 0; 98 left: 0; 99 width: 28px; 100 height: 28px; 101 margin: 2px; 102 border-radius: 0px; 103 background: white; 104 background-size: cover; 105 background-position: center; 106 background-attachment: fixed; 107 animation: square-animation 10s ease-in-out infinite both; 108} 109 110.loader-square:nth-of-type(0) { 111 animation-delay: 0s; 112} 113 114.loader-square:nth-of-type(1) { 115 animation-delay: -1.4285714286s; 116} 117 118.loader-square:nth-of-type(2) { 119 animation-delay: -2.8571428571s; 120} 121 122.loader-square:nth-of-type(3) { 123 animation-delay: -4.2857142857s; 124} 125 126.loader-square:nth-of-type(4) { 127 animation-delay: -5.7142857143s; 128} 129 130.loader-square:nth-of-type(5) { 131 animation-delay: -7.1428571429s; 132} 133 134.loader-square:nth-of-type(6) { 135 animation-delay: -8.5714285714s; 136} 137 138.loader-square:nth-of-type(7) { 139 animation-delay: -10s; 140}
Variation of aloader