Loader by JaydipPrajapati1910
#212121
1.loader { 2 box-sizing: border-box; 3 display: inline-block; 4 width: 50px; 5 height: 80px; 6 border-top: 5px solid #fff; 7 border-bottom: 5px solid #fff; 8 position: relative; 9 background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat; 10 background-size: 2px 40px; 11 background-position: 50% 0px; 12 animation: spinx 5s linear infinite; 13} 14 15.loader:before, .loader:after { 16 content: ""; 17 width: 40px; 18 left: 50%; 19 height: 35px; 20 position: absolute; 21 top: 0; 22 transform: translatex(-50%); 23 background: rgba(255, 255, 255, 0.4); 24 border-radius: 0 0 20px 20px; 25 background-size: 100% auto; 26 background-repeat: no-repeat; 27 background-position: 0 0px; 28 animation: lqt 5s linear infinite; 29} 30 31.loader:after { 32 top: auto; 33 bottom: 0; 34 border-radius: 20px 20px 0 0; 35 animation: lqb 5s linear infinite; 36} 37 38@keyframes lqt { 39 0%, 100% { 40 background-image: linear-gradient(#FF3D00 40px, transparent 0); 41 background-position: 0% 0px; 42 } 43 44 50% { 45 background-image: linear-gradient(#FF3D00 40px, transparent 0); 46 background-position: 0% 40px; 47 } 48 49 50.1% { 50 background-image: linear-gradient(#FF3D00 40px, transparent 0); 51 background-position: 0% -40px; 52 } 53} 54 55@keyframes lqb { 56 0% { 57 background-image: linear-gradient(#FF3D00 40px, transparent 0); 58 background-position: 0 40px; 59 } 60 61 100% { 62 background-image: linear-gradient(#FF3D00 40px, transparent 0); 63 background-position: 0 -40px; 64 } 65} 66 67@keyframes spinx { 68 0%, 49% { 69 transform: rotate(0deg); 70 background-position: 50% 36px; 71 } 72 73 51%, 98% { 74 transform: rotate(180deg); 75 background-position: 50% 4px; 76 } 77 78 100% { 79 transform: rotate(360deg); 80 background-position: 50% 36px; 81 } 82} 83 84 85
1.1K views
1.1K views
MIT License