Loader by shadowfax29
#e8e8e8
1.sharingon { 2 width: 6em; 3 height: 6em; 4 background-color: red; 5 border: 6px solid black; 6 animation: rot 1s ease-in-out infinite; 7} 8 9.ring { 10 position: absolute; 11 content: ""; 12 left: 50%; 13 top: 50%; 14 width: 3.5em; 15 height: 3.5em; 16 border: 4px solid rgb(110, 13 ,13 ,0.5); 17 transform: translate(-50%,-50%); 18} 19 20.sharingon, .ring, .to,.circle { 21 border-radius: 50%; 22} 23 24.to,.circle { 25 position: absolute; 26 content: ""; 27 width: 0.9em; 28 height: 0.9em; 29 background-color: black; 30} 31 32.to:nth-child(1) { 33 top: -0.5em; 34 left: 50%; 35 transform: translate(-40%); 36} 37 38.to::before { 39 content: ""; 40 position: absolute; 41 top: -0.5em; 42 right: -0.2em; 43 width: 1.1em; 44 height: 0.9em; 45 box-sizing: border-box; 46 border-left: 16px solid black; 47 border-radius: 100% 0 0; 48} 49 50.to:nth-child(2) { 51 bottom: 0.5em; 52 left: -0.35em; 53 transform: rotate(-120deg); 54} 55 56.to:nth-child(3) { 57 bottom: 0.5em; 58 right: -0.35em; 59 transform: rotate(120deg); 60} 61 62.circle { 63 top: 50%; 64 left: 50%; 65 transform: translate(-50%,-50%); 66 box-shadow: 0 0 20px 1px; 67 width: 1em; 68 height: 1em; 69} 70 71@keyframes rot { 72 0% { 73 transform: rotate(0deg); 74 } 75 76 100% { 77 transform: rotate(360deg); 78 } 79}
1K views
1K views
MIT License