busy-indicator.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/compositing/animation/busy-indicator.html
