third_party/WebKit/LayoutTests/compositing/animation/busy-indicator.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <title>Busy!</title>
   5         <style type="text/css" media="screen">
   6              .app-startup #app-loading {
   7                width: 300px;
   8                height: 100px;
   9                position: absolute;
  10                background: #00FF00;
  11              }
  12              .app-startup #app-loading-progress {
  13                position: absolute;
  14                top: 30px;
  15                left: 100px;
  16              }
  17             .progress-indicator {
  18                width: 94px;
  19                height: 30px;
  20                background: url(busy-indicator-no.png) no-repeat center center;
  21                display: none;
  22              }
  23              .progress-indicator > div {
  24                position: absolute;
  25                background: url(busy-indicator.png) no-repeat;
  26                width: 18px;
  27                height: 30px;
  28                opacity: 0;
  29                -webkit-animation-duration: 2.4s;
  30              }
  31              .progress-indicator.visible .progress-indicator0 {
  32                left: 0px;
  33                -webkit-animation-delay: 0.4s;
  34              }
  35              .progress-indicator.visible .progress-indicator1 {
  36                left: 19px;
  37                -webkit-animation-delay: 0.8s;
  38              }
  39              .progress-indicator.visible .progress-indicator2 {
  40                left: 38px;
  41                -webkit-animation-delay: 1.2s;
  42              }
  43              .progress-indicator.visible .progress-indicator3 {
  44                left: 57px;
  45                -webkit-animation-delay: 1.6s;
  46              }
  47              .progress-indicator.visible .progress-indicator4 {
  48                left: 76px;
  49                -webkit-animation-delay: 2s;
  50              }
  51              .progress-indicator.visible { display: block; }
  52              .progress-indicator.visible > div { -webkit-animation-play-state: running; }
  53
  54              @-webkit-keyframes spinner {
  55                  0% {
  56                      transform: scale(0.7);
  57                      opacity: 1;
  58                  }
  59                  10% {
  60                      transform: scale(1);
  61                      opacity: 1;
  62                  }
  63                  25% {
  64                      transform: scale(0.7);
  65                      opacity: 1;
  66                  }
  67                  30% {
  68                      transform: scale(0.7);
  69                      opacity: 0;
  70                  }
  71                  100% {
  72                      transform: scale(0.7);
  73                      opacity: 0;
  74                  }
  75              }
  76              .progress-indicator.visible > div {
  77                  -webkit-animation-name: spinner;
  78              }
  79     </style>
  80     <script type="text/javascript" charset="utf-8">
  81       function testEnded()
  82       {
  83         if (window.testRunner)
  84           testRunner.notifyDone();
  85       }
  86
  87       function startTest()
  88       {
  89         if (window.testRunner)
  90           testRunner.waitUntilDone();
  91
  92         document.getElementById('app-loading-progress').addEventListener(
  93             'webkitAnimationEnd', testEnded, false);
  94       }
  95
  96       window.addEventListener('load', startTest, false);
  97     </script>
  98     </head>
  99     <body class="app-startup">
 100         <div id="app-loading">
 101             <div id="app-loading-progress" class="progress-indicator visible">
 102                 <div class="progress-indicator0"></div>
 103                 <div class="progress-indicator1"></div>
 104                 <div class="progress-indicator2"></div>
 105                 <div class="progress-indicator3"></div>
 106                 <div class="progress-indicator4"></div>
 107             </div>
 108         </div>
 109     </body>
 110 </html>