Loader by Pradeepsaranbishnoi
#e8e8e8
1@keyframes pound { 2 to { 3 transform: scale(1.2); 4 box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45) 5 } 6} 7 8ul.loader { 9 display: block; 10 position: relative; 11 width: 5em; 12} 13 14.loader li { 15 list-style: none; 16 display: block; 17 float: left; 18 width: 0.5em; 19 height: 3em; 20 margin: 0 0.5em 0 0; 21 background: #635863; 22 background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%); 23 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863), color-stop(100%,#3d353b)); 24 background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%); 25 background: -o-linear-gradient(top, #635863 0%,#3d353b 100%); 26 background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%); 27 background: linear-gradient(to bottom, #635863 0%,#3d353b 100%); 28 box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0); 29 animation: pound .7s ease-in-out infinite alternate; 30 animation-delay: 0.05s; 31 transform-origin: center; 32} 33 34.loader li:nth-child(2) { 35 animation-delay: 0.20s; 36} 37 38.loader li:nth-child(3) { 39 animation-delay: 0.35s; 40} 41 42.loader li:nth-child(4) { 43 animation-delay: 0.50s; 44} 45 46.loader li:nth-child(5) { 47 animation-delay: 0.65s; 48} 49
651 views
651 views
MIT License