#212121
1.loader, 2.loader-in { 3 display: flex; 4 align-items: center; 5 justify-content: center; 6} 7 8.loader { 9 position: relative; 10 border-radius: 50%; 11 width: 80px; 12 height: 80px; 13 background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%); 14 box-shadow: 0 0 60px 0px rgba(0, 0, 0, 0.3); 15 animation: circle41 1.2s infinite alternate; 16} 17 18.loader-in { 19 width: 78%; 20 height: 78%; 21 border-radius: 50%; 22 animation: circle 1.2s infinite alternate; 23 animation-delay: calc(1.2s / 4); 24} 25 26.loader-in::after { 27 content: ''; 28 width: 100%; 29 height: 100%; 30 background: linear-gradient(to bottom right, #6E2E8E 0%, #0B9FBD 100%); 31 border-radius: 50%; 32 animation: rot122 2.4s infinite linear; 33} 34 35.loader-dot { 36 display: flex; 37 justify-content: center; 38 align-items: center; 39 position: absolute; 40 top: 50%; 41 left: 50%; 42 width: 55%; 43 height: 55%; 44 transform: translate(-50%, -50%); 45 border-radius: 50%; 46 background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%); 47 background-size: 120%; 48 background-position: center; 49} 50 51.loader-dot::after { 52 content: ''; 53 width: 40%; 54 height: 40%; 55 border-radius: 50%; 56 background-color: rgba(255, 255, 255, 0.8); 57 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); 58 animation: circle41 1.2s infinite alternate; 59 animation-delay: calc(1.2s / 4); 60} 61 62@keyframes rot122 { 63 0% { 64 transform: rotate(0deg); 65 } 66 67 100% { 68 transform: rotate(360deg); 69 } 70} 71 72@keyframes circle41 { 73 0% { 74 transform: scale(1); 75 } 76 77 100% { 78 transform: scale(1.1); 79 } 80}
1K views
1K views
Comments
MIT License