HTML CSS examples for CSS Animation:Bounce
CSS bouncing line loader animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @keyframes loader-animation { 0% {<!-- ww w. j av a2s .co m--> left: -100%; } 49% { left: 100%; } 50% { left: 100%; } 100% { left: -100%; } } .loader { height: 5px; width: 100%; overflow: hidden; } .loader .bar { position: relative; height: 5px; width: 100%; background-color: blue; animation-name: loader-animation; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } </style> </head> <body> <div class="loader"> <div class="bar"></div> </div> </body> </html>