Loader by exyreams
#212121
1.cssload-container * { 2 box-sizing: border-box; 3} 4 5.cssload-container { 6 margin: 38px auto 0 auto; 7 max-width: 1048px; 8} 9 10.cssload-container ul li { 11 list-style: none; 12} 13 14.cssload-flex-container { 15 display: flex; 16 display: -o-flex; 17 display: -ms-flex; 18 display: -webkit-flex; 19 display: -moz-flex; 20 flex-direction: row; 21 flex-wrap: wrap; 22 justify-content: space-around; 23} 24 25.cssload-flex-container li { 26 padding: 19px; 27 height: 188px; 28 width: 188px; 29 margin: 56px 38px; 30 position: relative; 31 text-align: center; 32} 33 34.cssload-loading-center { 35 display: inline-block; 36 position: absolute; 37 /* The color can be custmized, This color is for center cube.*/ 38 background: #ff0000; 39 height: 56px; 40 width: 56px; 41 left: 68px; 42 top: 69px; 43 transform: rotate(45deg); 44 border-radius: 6px; 45 animation: pulse 1.3s ease infinite; 46} 47 48.cssload-loading { 49 display: inline-block; 50 position: relative; 51 width: 141px; 52 height: 141px; 53 margin-top: 6px; 54 transform: rotate(45deg); 55} 56 57.cssload-loading:after, .cssload-loading:before { 58 position: absolute; 59 content: ''; 60 height: 19px; 61 width: 19px; 62 display: block; 63 top: 0; 64 /* The color can be custmized, This color is for 4 cubes.*/ 65 background: #ff5252; 66 border-radius: 6px; 67} 68 69.cssload-loading:after { 70 right: 0; 71 animation: square-tr 2.6s ease infinite; 72 animation-delay: .162.5s; 73} 74 75.cssload-loading:before { 76 animation: square-tl 2.6s ease infinite; 77 animation-delay: .162.5s; 78} 79 80.cssload-loading.cssload-two { 81 position: relative; 82 top: -150px; 83} 84 85.cssload-loading.cssload-two:after, .cssload-loading.cssload-two:before { 86 bottom: 0; 87 top: initial; 88} 89 90.cssload-loading.cssload-two:after { 91 animation: square-br 2.6s ease infinite; 92 animation-direction: reverse; 93} 94 95.cssload-loading.cssload-two:before { 96 animation: square-bl 2.6s ease infinite; 97 animation-direction: reverse; 98} 99 100@keyframes square-tl { 101 0% { 102 transform: translate(0, 0); 103 } 104 105 25% { 106 transform: translate(0, 117.5px); 107 } 108 109 50% { 110 transform: translate(117.5px, 117.5px); 111 } 112 113 75% { 114 transform: translate(117.5px, 0); 115 } 116} 117 118@keyframes square-bl { 119 0% { 120 transform: translate(0, 0); 121 } 122 123 25% { 124 transform: translate(0, -117.5px); 125 } 126 127 50% { 128 transform: translate(117.5px, -117.5px); 129 } 130 131 75% { 132 transform: translate(117.5px, 0); 133 } 134} 135 136@keyframes square-tr { 137 0% { 138 transform: translate(0, 0); 139 } 140 141 25% { 142 transform: translate(-117.5px, 0); 143 } 144 145 50% { 146 transform: translate(-117.5px, 117.5px); 147 } 148 149 75% { 150 transform: translate(0, 117.5px); 151 } 152} 153 154@keyframes square-br { 155 0% { 156 transform: translate(0, 0); 157 } 158 159 25% { 160 transform: translate(-117.5px, 0); 161 } 162 163 50% { 164 transform: translate(-117.5px, -117.5px); 165 } 166 167 75% { 168 transform: translate(0, -117.5px); 169 } 170} 171 172@keyframes rotate { 173 from { 174 transform: rotate(0deg); 175 } 176 177 to { 178 transform: rotate(360deg); 179 } 180} 181 182@keyframes pulse { 183 0%, 100% { 184 transform: scale(inherit) rotate(45deg); 185 } 186 187 75% { 188 transform: scale(0.25) rotate(45deg); 189 } 190}
792 views
792 views
MIT License