| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Busy!</title> |
| <style type="text/css" media="screen"> |
| .app-startup #app-loading { |
| width: 300px; |
| height: 100px; |
| position: absolute; |
| background: #00FF00; |
| } |
| .app-startup #app-loading-progress { |
| position: absolute; |
| top: 30px; |
| left: 100px; |
| } |
| .progress-indicator { |
| width: 94px; |
| height: 30px; |
| background: url(busy-indicator-no.png) no-repeat center center; |
| display: none; |
| } |
| .progress-indicator > div { |
| position: absolute; |
| background: url(busy-indicator.png) no-repeat; |
| width: 18px; |
| height: 30px; |
| opacity: 0; |
| animation-duration: 2.4s; |
| } |
| .progress-indicator.visible .progress-indicator0 { |
| left: 0px; |
| animation-delay: 0.4s; |
| } |
| .progress-indicator.visible .progress-indicator1 { |
| left: 19px; |
| animation-delay: 0.8s; |
| } |
| .progress-indicator.visible .progress-indicator2 { |
| left: 38px; |
| animation-delay: 1.2s; |
| } |
| .progress-indicator.visible .progress-indicator3 { |
| left: 57px; |
| animation-delay: 1.6s; |
| } |
| .progress-indicator.visible .progress-indicator4 { |
| left: 76px; |
| animation-delay: 2s; |
| } |
| .progress-indicator.visible { display: block; } |
| .progress-indicator.visible > div { animation-play-state: running; } |
| |
| @keyframes spinner { |
| 0% { |
| transform: scale(0.7); |
| opacity: 1; |
| } |
| 10% { |
| transform: scale(1); |
| opacity: 1; |
| } |
| 25% { |
| transform: scale(0.7); |
| opacity: 1; |
| } |
| 30% { |
| transform: scale(0.7); |
| opacity: 0; |
| } |
| 100% { |
| transform: scale(0.7); |
| opacity: 0; |
| } |
| } |
| .progress-indicator.visible > div { |
| animation-name: spinner; |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| function testEnded() |
| { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| function startTest() |
| { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| document.getElementById('app-loading-progress').addEventListener( |
| 'animationend', testEnded, false); |
| } |
| |
| window.addEventListener('load', startTest, false); |
| </script> |
| </head> |
| <body class="app-startup"> |
| <div id="app-loading"> |
| <div id="app-loading-progress" class="progress-indicator visible"> |
| <div class="progress-indicator0"></div> |
| <div class="progress-indicator1"></div> |
| <div class="progress-indicator2"></div> |
| <div class="progress-indicator3"></div> |
| <div class="progress-indicator4"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
