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