Loader by Cybercom682
#212121
1.loader { 2 position: relative; 3 background-color: red; 4 height: 40px; 5 width: 10px; 6 border-radius: 6px 0px 0px 6px; 7 animation: rotate 5s infinite; 8} 9.magnetism { 10 position: absolute; 11 color: rgb(0, 151, 252); 12 bottom: 0; 13 width: 80px; 14 left: 0%; 15 height: 40px; 16 border: solid 2px currentColor; 17 border-color: currentColor transparent transparent transparent; 18 border-radius: 50%; 19 transform: rotate(90deg); 20 animation: go 0.5s ease-in-out infinite; 21} 22 23.loader::before { 24 content: ""; 25 left: 10px; 26 position: absolute; 27 background: rgb(255, 0, 0); 28 background: linear-gradient( 29 90deg, 30 rgba(255, 0, 0, 1) 0%, 31 rgba(255, 0, 0, 1) 50%, 32 rgba(158, 158, 158, 1) 50%, 33 rgba(184, 184, 184, 1) 100% 34 ); 35 height: 10px; 36 width: 20px; 37} 38.loader::after { 39 content: ""; 40 left: 10px; 41 position: absolute; 42 bottom: 0; 43 background: rgb(255, 0, 0); 44 background: linear-gradient( 45 90deg, 46 rgba(255, 0, 0, 1) 0%, 47 rgba(255, 0, 0, 1) 50%, 48 rgba(158, 158, 158, 1) 50%, 49 rgba(184, 184, 184, 1) 100% 50 ); 51 height: 10px; 52 width: 20px; 53} 54 55@keyframes rotate { 56 0% { 57 transform: rotate(-30deg); 58 } 59 50% { 60 transform: rotate(30deg); 61 } 62 100% { 63 transform: rotate(-30deg); 64 } 65} 66 67@keyframes go { 68 0% { 69 left: 0%; 70 width: 30px; 71 opacity: 1; 72 } 73 50% { 74 left: 100%; 75 width: 60px; 76 opacity: 0.5; 77 } 78 100% { 79 width: 90px; 80 left: 200%; 81 opacity: 0; 82 } 83} 84
69 views
69 views
MIT License