#e8e8e8
1/* The loader container */ 2.loader { 3 width: 200px; 4 height: 200px; 5 perspective: 200px; 6} 7 8 9/* The dot */ 10.dot { 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 width: 120px; 15 height: 120px; 16 margin-top: -60px; 17 margin-left: -60px; 18 border-radius: 100px; 19 border: 40px outset #1e3f57; 20 transform-origin: 50% 50%; 21 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 22 background-color: transparent; 23 animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite; 24} 25 26.dot:nth-child(2) { 27 width: 140px; 28 height: 140px; 29 margin-top: -70px; 30 margin-left: -70px; 31 border-width: 30px; 32 border-color: #447891; 33 animation-name: dot2; 34 animation-delay: 75ms; 35 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 36 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 37} 38 39.dot:nth-child(3) { 40 width: 160px; 41 height: 160px; 42 margin-top: -80px; 43 margin-left: -80px; 44 border-width: 20px; 45 border-color: #6bb2cd; 46 animation-name: dot3; 47 animation-delay: 150ms; 48 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 49 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 50} 51 52@keyframes dot1 { 53 0% { 54 border-color: #1e3f57; 55 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 56 } 57 58 50% { 59 border-color: #1e574f; 60 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 61 } 62 63 100% { 64 border-color: #1e3f57; 65 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 66 } 67} 68 69@keyframes dot2 { 70 0% { 71 border-color: #447891; 72 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 73 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 74 } 75 76 50% { 77 border-color: #449180; 78 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 79 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 80 } 81 82 100% { 83 border-color: #447891; 84 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 85 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 86 } 87} 88 89@keyframes dot3 { 90 0% { 91 border-color: #6bb2cd; 92 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 93 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 94 } 95 96 50% { 97 border-color: #6bcdb2; 98 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 99 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 100 } 101 102 100% { 103 border-color: #6bb2cd; 104 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 105 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 106 } 107}
5.6K views
5.6K views
Comments
MIT License