Loader by Cybercom682
#e8e8e8
1.loader { 2 height: 150px; 3 width: 150px; 4 border-radius: 50%; 5 position: relative; 6} 7 8.loader::before { 9 content: ""; 10 height: 100%; 11 width: 100%; 12 border: 1px solid black; 13 border-radius: 50%; 14 position: absolute; 15 animation: doitreverse 4s infinite; 16} 17 18.loader::after { 19 content: ""; 20 height: 100%; 21 width: 100%; 22 border: 1px solid black; 23 border-radius: 50%; 24 position: absolute; 25 animation: doit 4s infinite; 26} 27 28@keyframes doit { 29 0% { 30 transform: scale(1); 31 } 32 33 50% { 34 border-radius: 20% 50%; 35 transform: scale(1.25); 36 } 37 38 100% { 39 transform: scale(1); 40 } 41} 42 43@keyframes doitreverse { 44 0% { 45 transform: rotate(360deg); 46 } 47 48 50% { 49 border-radius: 50% 20%; 50 transform: rotate(180deg); 51 } 52 53 100% { 54 transform: rotate(0deg); 55 } 56} 57 58.eye { 59 height: 50%; 60 width: 50%; 61 border-radius: 50%; 62 border: 1px solid black; 63 background-color: rgb(85, 0, 128); 64 position: absolute; 65 left: 25%; 66 top: 25%; 67 animation: showme 4s infinite; 68} 69 70.eye::before { 71 content: ""; 72 height: 20%; 73 width: 20%; 74 border-radius: 50%; 75 background-color: white; 76 position: absolute; 77 top: 25%; 78 left: 50%; 79 animation: showme 4s infinite; 80} 81 82.eye::after { 83 content: ""; 84 height: 10%; 85 width: 10%; 86 border-radius: 50%; 87 background-color: white; 88 position: absolute; 89 top: 60%; 90 left: 50%; 91 animation: showme 4s infinite; 92} 93 94@keyframes showme { 95 0% { 96 transform: scale(0.3); 97 } 98 99 50% { 100 transform: scale(1); 101 } 102 103 100% { 104 transform: scale(0.3); 105 } 106}
470 views
470 views
MIT License