153 views
1/* The loader */ 2.loader { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 width: 200px; 7 height: 200px; 8 margin-top: -100px; 9 margin-left: -100px; 10 perspective: 600px; 11 transform-style: perserve-3d; 12} 13 14/* The dot */ 15.dot { 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 width: 100px; 20 height: 100px; 21 margin-top: -50px; 22 margin-left: -50px; 23 border-radius: 100px; 24 border: 20px solid #1e3f57; 25 transform-style: perserve-3d; 26 transform: scale(0) rotateX(60deg); 27 animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite; 28} 29 30.dot:nth-child(2) { 31 animation-delay: 200ms; 32} 33 34.dot:nth-child(3) { 35 animation-delay: 400ms; 36} 37 38.dot:nth-child(4) { 39 animation-delay: 600ms; 40} 41 42.dot:nth-child(5) { 43 animation-delay: 800ms; 44} 45 46.dot:nth-child(6) { 47 animation-delay: 1000ms; 48} 49 50.dot:nth-child(7) { 51 animation-delay: 1200ms; 52} 53 54.dot:nth-child(8) { 55 animation-delay: 1400ms; 56} 57 58@keyframes dot { 59 0% { 60 opacity: 0; 61 border-color: #6bb2cd; 62 transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1); 63 } 64 65 40% { 66 opacity: 1; 67 transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1); 68 } 69 70 100% { 71 opacity: 0; 72 transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1); 73 } 74}
MIT License