Loader by Akshdeep74644
#e8e8e8
1.loader { 2 position: relative; 3} 4 5.box-1 { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 position: relative; 10 height: 150px; 11 width: 150px; 12 background-color: #FFFFFF; 13 background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 34%, #FF0000 100%); 14 border-radius: 50%; 15 animation: rotate 3s linear infinite; 16 box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px; 17} 18 19@keyframes rotate { 20 0% { 21 transform: rotate(0deg); 22 } 23 24 100% { 25 transform: rotate(360deg); 26 } 27} 28 29.box-1::before { 30 content: ''; 31 position: absolute; 32 inset: 15px; 33 background: #f5f5f5; 34 border-radius: 50%; 35 box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; 36} 37 38.loader span { 39 text-align: center; 40 position: absolute; 41 top: 65px; 42 left: 25px; 43 color: black; 44 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 45 letter-spacing: 2px; 46 font-weight: 800; 47 font-size: 1rem; 48 animation: text-animate412 3s linear infinite; 49} 50 51@keyframes text-animate412 { 52 53 10% { 54 opacity: 0; 55 } 56 57 100% { 58 opacity: 1; 59 } 60}
1.2K views
1.2K views
MIT License