#e8e8e8
1.loading { 2 transform: translate(0%, -50%); 3} 4 5.l { 6 color: black; 7 opacity: 0; 8 animation: op 2s ease-in-out infinite; 9 animation-delay: 0.2s; 10} 11 12.o { 13 color: black; 14 opacity: 0; 15 animation: op 2s ease-in-out infinite; 16 animation-delay: 0.4s; 17} 18 19.a { 20 color: black; 21 opacity: 0; 22 animation: op 2s ease-in-out infinite; 23 animation-delay: 0.6s; 24} 25 26.d { 27 color: black; 28 opacity: 0; 29 animation: op 2s ease-in-out infinite; 30 animation-delay: 0.8s; 31} 32 33.i { 34 color: black; 35 opacity: 0; 36 animation: op 2s ease-in-out infinite; 37 animation-delay: 1s; 38} 39 40.n { 41 color: black; 42 opacity: 0; 43 animation: op 2s ease-in-out infinite; 44 animation-delay: 1.2s; 45} 46 47.g { 48 color: black; 49 opacity: 0; 50 animation: op 2s ease-in-out infinite; 51 animation-delay: 1.4s; 52} 53 54.d1 { 55 color: black; 56 opacity: 0; 57 animation: op1 2s ease-in-out infinite; 58 animation-delay: 1.6s; 59} 60 61.d2 { 62 color: black; 63 opacity: 0; 64 animation: op1 2s ease-in-out infinite; 65 animation-delay: 2s; 66} 67 68.load { 69 position: relative; 70 width: 1.2em; 71 height: 1.2em; 72 border-radius: 50%; 73} 74 75.progress { 76 top: 50%; 77 left: -80%; 78 position: absolute; 79 margin-top: 2.2em; 80 transform: translate(10%, -50%); 81 content: ''; 82 width: 3.1em; 83 height: 3.1em; 84 background: transparent; 85 border-radius: 50%; 86 animation: load_37100 2s ease-in-out infinite; 87 animation-delay: 1s; 88} 89 90@keyframes load_37100 { 91 0% { 92 background-color: #DB4437; 93 } 94 95 25% { 96 background-color: #F4B400; 97 } 98 99 75% { 100 background-color: #0F9D58; 101 } 102 103 100% { 104 background-color: #4285F4; 105 } 106} 107 108.progress:nth-child(2) { 109 left: 50%; 110 animation-delay: 1.3s; 111} 112 113.progress:nth-child(3) { 114 left: 180%; 115 animation-delay: 1.7s; 116} 117 118.progress:nth-child(4) { 119 left: 300%; 120 animation-delay: 2s; 121} 122 123@keyframes op { 124 0% { 125 color: black; 126 opacity: 1; 127 } 128 129 50% { 130 color: green; 131 opacity: 1; 132 } 133 134 100% { 135 color: black; 136 opacity: 1; 137 } 138} 139 140@keyframes op1 { 141 0% { 142 color: black; 143 opacity: 1; 144 } 145 146 50% { 147 color: green; 148 opacity: 0; 149 } 150 151 100% { 152 color: black; 153 opacity: 1; 154 } 155}
987 views
987 views
Comments
MIT License