#e8e8e8
1.loader { 2 position: absolute; 3 margin: auto; 4 top: 0; 5 bottom: 0; 6 left: 0; 7 right: 0; 8 width: 6.250em; 9 height: 6.250em; 10 animation: rotate5123 2.4s linear infinite; 11} 12 13.white { 14 top: 0; 15 bottom: 0; 16 left: 0; 17 right: 0; 18 background: white; 19 animation: flash 2.4s linear infinite; 20 opacity: 0; 21} 22 23.dot { 24 position: absolute; 25 margin: auto; 26 width: 2.4em; 27 height: 2.4em; 28 border-radius: 100%; 29 transition: all 1s ease; 30} 31 32.dot:nth-child(2) { 33 top: 0; 34 bottom: 0; 35 left: 0; 36 background: #FF4444; 37 animation: dotsY 2.4s linear infinite; 38} 39 40.dot:nth-child(3) { 41 left: 0; 42 right: 0; 43 top: 0; 44 background: #FFBB33; 45 animation: dotsX 2.4s linear infinite; 46} 47 48.dot:nth-child(4) { 49 top: 0; 50 bottom: 0; 51 right: 0; 52 background: #99CC00; 53 animation: dotsY 2.4s linear infinite; 54} 55 56.dot:nth-child(5) { 57 left: 0; 58 right: 0; 59 bottom: 0; 60 background: #33B5E5; 61 animation: dotsX 2.4s linear infinite; 62} 63 64@keyframes rotate5123 { 65 0% { 66 transform: rotate( 0 ); 67 } 68 69 10% { 70 width: 6.250em; 71 height: 6.250em; 72 } 73 74 66% { 75 width: 2.4em; 76 height: 2.4em; 77 } 78 79 100% { 80 transform: rotate(360deg); 81 width: 6.250em; 82 height: 6.250em; 83 } 84} 85 86@keyframes dotsY { 87 66% { 88 opacity: .1; 89 width: 2.4em; 90 } 91 92 77% { 93 opacity: 1; 94 width: 0; 95 } 96} 97 98@keyframes dotsX { 99 66% { 100 opacity: .1; 101 height: 2.4em; 102 } 103 104 77% { 105 opacity: 1; 106 height: 0; 107 } 108} 109 110@keyframes flash { 111 33% { 112 opacity: 0; 113 border-radius: 0%; 114 } 115 116 55% { 117 opacity: .6; 118 border-radius: 100%; 119 } 120 121 66% { 122 opacity: 0; 123 } 124} 125
Comments
MIT License