Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>PayPal loading animation</h1>
<div class="paypal"></div>
<p>Created by <a href="https://twitter.com/FWeinb">Fabrice Weinberg</a></p>
              
            
!

CSS

              
                @import "compass/css3";

$color10: #edf1f5;
$color9:  #dce4ec;
$color8:  #c9d5e2;
$color7:  #b7c6d8;
$color6:  #a4b8ce;
$color5:  #90a8c4;
$color4:  #7c99ba;
$color3:  #6588af;
$color2:  #3f6bab;
$color1:  #1e55a0;


.paypal{
  position:relative;
  display:block;
  
  transform:skew(-20deg);
  margin:20px auto;
  
  border-radius:2px;
   
  width:34px;
  height:24px;
  
  background-image: 
    linear-gradient(-35deg, $color10 50%, $color10 0),  
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color9 50%,  $color10 0),
    linear-gradient(-35deg, $color8 50%,  $color7 0), 
    linear-gradient(0deg,   $color6 50%,  $color5 0),
    linear-gradient(37deg,  $color4 50%,  $color3 0),
    linear-gradient(90deg,  $color2 50%,  $color1 0), 

    linear-gradient(-35deg, $color10 50%, $color1 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color9 50%, $color8 0), 
    linear-gradient(0deg,   $color7 50%, $color6 0),
    linear-gradient(37deg,  $color5 50%, $color4 0),
    linear-gradient(90deg,  $color3 50%, $color2 0),

    linear-gradient(-35deg, $color1 50%, $color2 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color10 50%, $color9 0), 
    linear-gradient(0deg,   $color8 50%, $color7 0),
    linear-gradient(37deg,  $color6 50%, $color5 0),
    linear-gradient(90deg,  $color4 50%, $color3 0),

    linear-gradient(-35deg, $color2 50%, $color3 0), 
    linear-gradient(0deg,   $color10 50%, $color1 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color9 50%, $color8 0),
    linear-gradient(37deg,  $color7 50%, $color6 0),
    linear-gradient(90deg,  $color5 50%, $color4 0),

    linear-gradient(-35deg, $color3 50%, $color4 0), 
    linear-gradient(0deg,   $color1 50%, $color2 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color9 0),
    linear-gradient(37deg,  $color8 50%, $color7 0),
    linear-gradient(90deg,  $color6 50%, $color5 0),

    linear-gradient(-35deg, $color4 50%, $color5 0), 
    linear-gradient(0deg,   $color2 50%, $color3 0),
    linear-gradient(35deg,  $color10 50%, $color1 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color9 50%, $color8 0),
    linear-gradient(90deg,  $color7 50%, $color6 0),

    linear-gradient(-35deg, $color5 50%, $color6 0), 
    linear-gradient(0deg,   $color3 50%, $color4 0),
    linear-gradient(35deg,  $color1 50%, $color2 0), 
    linear-gradient(90deg,  $color10 50%, $color10 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color9 0),
    linear-gradient(90deg,  $color8 50%, $color7 0),


    linear-gradient(-35deg, $color6 50%, $color7 0), 
    linear-gradient(0deg,   $color4 50%, $color5 0),
    linear-gradient(35deg,  $color2 50%, $color3 0), 
    linear-gradient(90deg,  $color10 50%, $color1 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color9 50%, $color8 0),


    linear-gradient(-35deg, $color7 50%, $color8 0), 
    linear-gradient(0deg,   $color5 50%, $color6 0),
    linear-gradient(35deg,  $color3 50%, $color4 0), 
    linear-gradient(90deg,  $color1 50%, $color2 0),
    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color9 0),


    linear-gradient(-35deg, $color8 50%, $color9 0), 
    linear-gradient(0deg,   $color6 50%, $color7 0),
    linear-gradient(35deg,  $color4 50%, $color5 0), 
    linear-gradient(90deg,  $color2 50%, $color3 0),
    linear-gradient(-35deg, $color1 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),


    linear-gradient(-35deg, $color9 50%, $color10 0), 
    linear-gradient(0deg,   $color7 50%, $color8 0),
    linear-gradient(35deg,  $color5 50%, $color6 0), 
    linear-gradient(90deg,  $color3 50%, $color4 0),
    linear-gradient(-35deg, $color2 50%, $color1 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),


    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color8 50%, $color9 0),
    linear-gradient(35deg,  $color6 50%, $color7 0), 
    linear-gradient(90deg,  $color4 50%, $color5 0),
    linear-gradient(-35deg, $color3 50%, $color2 0), 
    linear-gradient(0deg,   $color1 50%, $color10 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),

    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color9 50%, $color10 0),
    linear-gradient(35deg,  $color7 50%, $color8 0), 
    linear-gradient(90deg,  $color5 50%, $color6 0),
    linear-gradient(-35deg, $color4 50%, $color3 0), 
    linear-gradient(0deg,   $color2 50%, $color1 0),
    linear-gradient(37deg,  $color10 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),


    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color8 50%, $color9 0), 
    linear-gradient(90deg,  $color6 50%, $color7 0),
    linear-gradient(-35deg, $color5 50%, $color4 0), 
    linear-gradient(0deg,   $color3 50%, $color2 0),
    linear-gradient(37deg,  $color1 50%, $color10 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),


    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color9 50%, $color10 0), 
    linear-gradient(90deg,  $color7 50%, $color8 0),
    linear-gradient(-35deg, $color6 50%, $color5 0), 
    linear-gradient(0deg,   $color4 50%, $color3 0),
    linear-gradient(37deg,  $color2 50%, $color1 0),
    linear-gradient(90deg,  $color10 50%, $color10 0),

    linear-gradient(-35deg, $color10 50%, $color10 0), 
    linear-gradient(0deg,   $color10 50%, $color10 0),
    linear-gradient(35deg,  $color10 50%, $color10 0), 
    linear-gradient(90deg,  $color8 50%, $color9 0),
    linear-gradient(-35deg, $color7 50%, $color6 0), 
    linear-gradient(0deg,   $color5 50%, $color4 0),
    linear-gradient(37deg,  $color3 50%, $color2 0),
    linear-gradient(90deg,  $color1 50%, $color10 0);


   
  background-size:11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/


                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px, /*Top*/

                  11px 8px, /*Edge*/
                  11px 8px, /*Right*/
                  11px 8px, /*Edge*/
                  14px 8px, /*Bottom*/
                  11px 8px, /*Edge*/
                  11px 8px, /*Left*/
                  11px 8px, /*Edge*/    
                  14px 8px; /*Top*/     


  background-position:23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;                      
  
  background-repeat:no-repeat;
   

  /*new*/  
  animation: spin 1.5s steps(1, start) infinite;
  
}

.paypal:after, .paypal:before{
  position:absolute;
  content:'';
  transform:skew(20deg);  
}

.paypal:before{
  bottom:1.4px;
  right:3px;
  border:2px solid #1a4575;
  width:3px;
  height:6px;
  border-radius:100% 100% 0 0;
  box-shadow:0 0 0 1px white, 0 0 0 1px white inset;
}

.paypal:after{
  bottom:-1px;
  right:1.5px;
  width:8px;
  height:7px;
  background:#1a4575;
  
  box-shadow:0 1px 0 1px white;
}

@keyframes spin{
  6.25%{  
    background-position:
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;  
  }
  12.5%{ 
    background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
  
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;   
  }
  18.75%{
    background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;  
  }
  25%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;
  }
  31.25%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;
  }
  37.5%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;
  }
  43.75%{
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0; 
  }
  50%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0; 
  }
  56.25%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;
  }
  62.5%{  
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;
  }
  68.75%{
        background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;  
  }
  75%{      
   background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;  
  }
  81.25%{
      background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0;  
  }
  87.5%{  
    background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0; 
  }
  93.75%{  
    background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   , /*Top*/

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0; 
  }
  100%{  
    background-position:-99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      

                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,
                      -99px 0,

                      23.9px 0px , /*Edge*/
                      23.9px 8px , /*Right*/
                      23.9px 16px, /*Edge*/
                      10.9px 16px, /*Bottom*/
                           0 16px, /*Edge*/
                           0 8px , /*Left*/
                           0 0   , /*Edge*/
                      10.9px 0   ; 
  }
}


body{
   font-family:Helvetica, sans-serif;
}

h1,p{
  text-align:center;
}

p{
  font-size:9pt;
  color:gray;
}

a{
  color:#1a4575;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}
              
            
!

JS

              
                /*
  The paypal loading animation
   by Fabrice Weinberg (blog.weinberg.me)

This is working in all major browser now. 

Webkit and IE10 are the only browser which support the animation of the background-image property. In the spec only these property are animatable (http://dev.w3.org/csswg/css3-transitions/#animatable-properties-) background-image is not included.

Here is a little test pen were I explain a possible fix:
  https://codepen.io/FWeinb/pen/odmxq

There might be a weird blue line above the animation (https://pbs.twimg.com/media/A77mivxCQAEZ2ot.png). This is a bug on codepen here is a standalone version:
https://dl.dropbox.com/u/5319/paypalloading/index.html

Tested in:
  Chrome 23
  Safari 6 (and Mobile Safari on iOS6)
  Firefox 16.0.1 
  Opera 12.10
  IE 10   


*/
              
            
!
999px

Console