297 views
1.loader { 2 position: relative; 3 overflow: hidden; 4 box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1), 5 10px 10px 10px rgba(0, 0, 0, 0.4), 6 inset -5px -5px -5px rgba(255, 255, 255, 0.2), 7 inset 10px 10px 10px rgba(0, 0, 0, 0.4); 8 height: 100px; 9 width: 100px; 10 border-radius: 50%; 11} 12 13.loader:before { 14 position: absolute; 15 content: ''; 16 z-index: 10; 17 opacity: 10; 18 top: 25px; 19 left: 25px; 20 right: 25px; 21 bottom: 25px; 22 background-color: #010113; 23 border-radius: 50%; 24 box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1), 25 10px 10px 10px rgba(0, 0, 0, 0.4), 26 inset -5px -5px -5px rgba(255, 255, 255, 0.2), 27 inset 10px 10px 10px rgba(0, 0, 0, 0.4); 28} 29 30.loader span { 31 position: absolute; 32 height: 100%; 33 width: 100%; 34 filter: blur(20px); 35 border-radius: 50%; 36 background: linear-gradient(#0e11d4, #0b8f84, #d81587); 37 animation: loader_41 0.6s linear infinite; 38} 39 40@keyframes loader_41 { 41 0% { 42 transform: rotate(0deg); 43 } 44 45 100% { 46 transform: rotate(360deg); 47 } 48}
JkHuger
JkHuger
MIT License