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