Loader by pradipkaityuiux
#212121
1.loader { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 width: 150px; 7 height: 150px; 8 background: transparent; 9 border: 3px solid rgba(0, 102, 255, 0.1); 10 border-radius: 50%; 11 text-align: center; 12 line-height: 150px; 13 font-family: sans-serif; 14 font-size: 20px; 15 color: #0066ff; 16 letter-spacing: 2px; 17 text-transform: uppercase; 18 text-shadow: 0 0 10px #0066ff; 19 box-shadow: 0 0 20px rgba(0, 0, 0, .15); 20} 21 22.loader::before { 23 content: ''; 24 position: absolute; 25 top: -3px; 26 left: -3px; 27 width: 100%; 28 height: 100%; 29 border: 3px solid transparent; 30 border-top: 3px solid #0066ff; 31 border-right: 3px solid #0066ff; 32 border-radius: 50%; 33 animation: animateC 2s linear infinite; 34} 35 36.loader span { 37 display: block; 38 position: absolute; 39 top: calc(50% - 2px); 40 left: 50%; 41 width: 50%; 42 height: 4px; 43 background: transparent; 44 transform-origin: left; 45 animation: animate 2s linear infinite; 46} 47 48.loader span::before { 49 content: ''; 50 position: absolute; 51 width: 16px; 52 height: 16px; 53 border-radius: 50%; 54 background: #00aeff; 55 top: -6px; 56 right: -8px; 57 box-shadow: 0 0 20px 5px #0066ff; 58} 59 60@keyframes animateC { 61 0% { 62 transform: rotate(0deg); 63 } 64 65 100% { 66 transform: rotate(360deg); 67 } 68} 69 70@keyframes animate { 71 0% { 72 transform: rotate(45deg); 73 } 74 75 100% { 76 transform: rotate(405deg); 77 } 78}
2.4K views
2.4K views
MIT License