276 views
1/* The loader container */ 2.loader { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 width: 200px; 7 height: 100px; 8 margin-top: -100px; 9 margin-left: -100px; 10 perspective: 1000px; 11 transform-style: preserv3d; 12} 13 14.loader--reflect { 15 margin-top: 0; 16} 17 18.loader--reflect:after { 19 content: ''; 20 position: absolute; 21 top: 0; 22 left: -25%; 23 width: 150%; 24 height: 110%; 25 background: linear-gradient(0deg, rgba(238, 238, 238, 1), rgba(238, 238, 238, 1) 20%, rgba(238, 238, 238, 0.3)); 26} 27 28 29/* The bar */ 30.bar { 31 position: absolute; 32 bottom: 0; 33 left: 0; 34 width: 20px; 35 height: 100px; 36 background-color: #1e3f57; 37 transform: scaleY(0); 38 transform-style: preserve3d; 39 animation: bar 3s cubic-bezier(.81,.04,.4,.7) infinite; 40} 41 42.bar:nth-child(2) { 43 left: 20px; 44 background-color: #264a63; 45 animation-delay: 50ms; 46} 47 48.bar:nth-child(3) { 49 left: 40px; 50 background-color: #2d566f; 51 animation-delay: 100ms; 52} 53 54.bar:nth-child(4) { 55 left: 60px; 56 background-color: #35617a; 57 animation-delay: 150ms; 58} 59 60.bar:nth-child(5) { 61 left: 80px; 62 background-color: #3d6d86; 63 animation-delay: 200ms; 64} 65 66.bar:nth-child(6) { 67 left: 100px; 68 background-color: #447892; 69 animation-delay: 250ms; 70} 71 72.bar:nth-child(7) { 73 left: 120px; 74 background-color: #4c849e; 75 animation-delay: 300ms; 76} 77 78.bar:nth-child(8) { 79 left: 140px; 80 background-color: #548fa9; 81 animation-delay: 350ms; 82} 83 84.bar:nth-child(9) { 85 left: 160px; 86 background-color: #5c9bb5; 87 animation-delay: 400ms; 88} 89 90.bar:nth-child(10) { 91 left: 180px; 92 background-color: #63a6c1; 93 animation-delay: 450ms; 94} 95 96.loader--reflect .bar { 97 animation-name: bar-reflect; 98} 99 100@keyframes bar { 101 0% { 102 transform: rotateZ(-180deg) rotateX(-360deg); 103 } 104 105 75%,100% { 106 transform: rotateZ(0) rotateX(0); 107 } 108} 109 110@keyframes bar-reflect { 111 0% { 112 transform: rotateZ(180deg) rotateX(360deg); 113 } 114 115 75%,100% { 116 transform: rotateZ(0) rotateX(0); 117 } 118}
MIT License