.loading-animation-wrapper { width: 200px; height: 40px; margin: 10px auto 0 auto; padding-top: 4px; } .loading-animation-wrapper .caption { margin: 0; padding: 0; text-align: center; color: #fff; font: 12px/1.4em Arial; } .loading-animation-wrapper .dot { position: relative; display: inline-block; width: 10px; height: 10px; background: #fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-animation: movingdot 4s infinite; -webkit-animation: movingdot 4s infinite; animation: movingdot 4s infinite; -moz-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415); -webkit-animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415); animation-timing-function: cubic-bezier(0.03, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .loading-animation-wrapper .dot:nth-child(1) { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; } .loading-animation-wrapper .dot:nth-child(2) { -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .loading-animation-wrapper .dot:nth-child(3) { -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .loading-animation-wrapper .dot:nth-child(4) { -moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .loading-animation-wrapper .dot:nth-child(5) { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-moz-keyframes movingdot { 0% { -moz-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -moz-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes movingdot { 0% { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { opacity: 0; } } @keyframes movingdot { 0% { -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -moz-transform: translateX(200px); -ms-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { opacity: 0; } }