346 views
1.loader { 2 position: relative; 3 width: 180px; 4 height: 180px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 transform-style: preserve-3d; 9 transform: perspective(500px) rotateX(45deg); 10} 11 12.loader span { 13 position: absolute; 14 display: block; 15 border: 15px solid #fff; 16 box-sizing: border-box; 17 border-radius: 50%; 18 box-shadow: 0 10px 0 #e0e0e0, inset 0 10px 0 #e0e0e0; 19 animation: animate_5013 4.5s ease-in-out infinite; 20} 21 22.loader span:nth-child(1) { 23 animation-delay: 0s; 24} 25 26.loader span:nth-child(2) { 27 animation-delay: 1.5s; 28} 29 30.loader span:nth-child(3) { 31 animation-delay: 3s; 32} 33 34@keyframes animate_5013 { 35 0% { 36 transform: translateZ(-100px); 37 width: 100%; 38 height: 100%; 39 } 40 41 25% { 42 transform: translateZ(100px); 43 width: 100%; 44 height: 100%; 45 } 46 47 50% { 48 transform: translateZ(100px); 49 width: 35%; 50 height: 35%; 51 } 52 53 75% { 54 transform: translateZ(-100px); 55 width: 35%; 56 height: 35%; 57 } 58 59 100% { 60 transform: translateZ(-100px); 61 width: 100%; 62 height: 100%; 63 } 64}
JkHuger
JkHuger
MIT License