#212121
1.loader { 2 position: relative; 3 margin: auto; 4 box-sizing: border-box; 5 background-clip: padding-box; 6 width: 200px; 7 height: 200px; 8 border-radius: 50%; 9 border: 4px solid rgba(255, 255, 255, 0.1); 10 -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%); 11 transform-origin: 50% 60%; 12 transform: perspective(200px) rotateX(66deg); 13} 14 15.loader:before, .loader:after { 16 content: ""; 17 position: absolute; 18 margin: -4px; 19 box-sizing: inherit; 20 width: inherit; 21 height: inherit; 22 border-radius: inherit; 23 opacity: 0.05; 24 border: inherit; 25 border-color: transparent; 26 animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite; 27} 28 29.loader:before { 30 border-top-color: #66e6ff; 31} 32 33.loader:after { 34 border-top-color: #f0db75; 35 animation-delay: 0.3s; 36} 37 38@keyframes spinner-spin { 39 100% { 40 transform: rotate(360deg); 41 } 42} 43 44@keyframes spinner-fade { 45 20% { 46 opacity: 0.1; 47 } 48 49 40% { 50 opacity: 1; 51 } 52 53 60% { 54 opacity: 0.1; 55 } 56} 57
Comments
MIT License