#212121
1.loader { 2 position: relative; 3 width: 120px; 4 height: 90px; 5 margin: 0 auto; 6} 7 8.loader:before { 9 content: ""; 10 position: absolute; 11 bottom: 30px; 12 left: 50px; 13 height: 30px; 14 width: 30px; 15 border-radius: 50%; 16 background: #2a9d8f; 17 animation: loading-bounce 0.5s ease-in-out infinite alternate; 18} 19 20.loader:after { 21 content: ""; 22 position: absolute; 23 right: 0; 24 top: 0; 25 height: 7px; 26 width: 45px; 27 border-radius: 4px; 28 box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; 29 animation: loading-step 1s ease-in-out infinite; 30} 31 32@keyframes loading-bounce { 33 0% { 34 transform: scale(1, 0.7); 35 } 36 37 40% { 38 transform: scale(0.8, 1.2); 39 } 40 41 60% { 42 transform: scale(1, 1); 43 } 44 45 100% { 46 bottom: 140px; 47 } 48} 49 50@keyframes loading-step { 51 0% { 52 box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 53 0 10px 0 #f2f2f2, 54 -35px 50px 0 #f2f2f2, 55 -70px 90px 0 #f2f2f2; 56 } 57 58 100% { 59 box-shadow: 0 10px 0 #f2f2f2, 60 -35px 50px 0 #f2f2f2, 61 -70px 90px 0 #f2f2f2, 62 -70px 90px 0 rgba(0, 0, 0, 0); 63 } 64}
Comments
MIT License