#212121
1.loader2 { 2 display: flex; 3 align-items: center; 4} 5 6.load21 { 7 position: relative; 8 content: ""; 9 height: 0.2em; 10 width: 4em; 11 border-radius: 5px; 12 opacity: 0; 13 background-color: white; 14 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 15 animation: 2s flow_21 infinite; 16 animation-delay: 0.2s; 17} 18 19.load22 { 20 position: absolute; 21 content: ""; 22 height: 0.2em; 23 width: 4em; 24 opacity: 0; 25 border-radius: 5px; 26 background-color: white; 27 animation: 2s flow_21 infinite; 28 animation-delay: 0.4s; 29} 30 31.load23 { 32 position: absolute; 33 content: ""; 34 height: 0.2em; 35 width: 4em; 36 opacity: 0; 37 border-radius: 5px; 38 background-color: white; 39 animation: 2s flow_21 infinite; 40 animation-delay: 0.6s; 41} 42 43.load24 { 44 position: absolute; 45 content: ""; 46 height: 0.2em; 47 width: 4em; 48 opacity: 0; 49 border-radius: 5px; 50 background-color: white; 51 animation: 2s flow_21 infinite; 52 animation-delay: 0.8s; 53} 54 55.load25 { 56 position: absolute; 57 content: ""; 58 height: 0.2em; 59 width: 4em; 60 opacity: 0; 61 border-radius: 5px; 62 background-color: white; 63 animation: 2s flow_21 infinite; 64 animation-delay: 1s; 65} 66 67@keyframes flow_21 { 68 0% { 69 transform: translateY(1em); 70 opacity: 1; 71 } 72 73 50% { 74 transform: translateY(-1em); 75 opacity: 1; 76 } 77 78 100% { 79 transform: translateY(1em); 80 opacity: 1; 81 } 82}
900 views
900 views
Comments
MIT License