LOADING (anim/CSS)

#stuck { /* fixed container */
    text-align:center;
    background-color:rgba(150,150,150,.6);
    padding:10px;
    width:150px;
    min-height:30px;
    position:fixed;
    right:15px;
    top:15px;
    z-index:2;
    border: 5px outset rgba(0,0,0,.2);
    border-radius: 20%;
}
         /* Each letter of LOADING is*/
        /* nested within a <span>   */
       /*  with the following IDs  */

#l1 { /* L */
    animation:pete 1s linear 0s 1 normal;
    animation:repete 1s linear 1s 4 normal;
    }
#l2 { /* O */
    animation:pete 1s linear .1s 1 normal;
    animation:repete 1s linear 1.1s 4 normal;
    }
#l3 { /* A */
    animation:pete 1s linear .2.s 1 normal;
    animation:repete 1s linear 1.2s 4 normal;
    }
#l4 { /* D */
    animation:pete 1s linear .3s 1 normal;
    animation:repete 1s linear 1.3s 4 normal;
    }
#l5 { /* I */
    animation:pete 1s linear 0.4s 1 normal;
    animation:repete 1s linear 1.4s 4 normal;
    }
#l6 { /* N */
    animation:pete 1s linear 0.5s 1 normal;
    animation:repete 1s linear 1.5s 4 normal;
    }
#l7 { /* G */
    animation:pete 1s linear 0.6s 1 normal;
    animation:repete 1s linear 1.6s 4 normal;
    }

    /* The keyframes for the animation */

@keyframes pete{ /* Plays 1x */
    0%   {color: black; font-size: 1em; text-shadow: 1px 0px 1px blue, -1px 0px 1px blue, 0px 1px 1px blue, 0px -1px 1px blue;}
    14%  {color: blue; font-size: 1.1em; text-shadow: 2px 0px 2px purple, -2px 0px 2px purple, 0px 2px 2px purple, 0px -2px 2px purple;}
    28%  {color: purple; font-size: 1.2em; text-shadow: 3px 0px 3px red, -3px 0px 3px red, 0px 3px 3px red, 0px -3px 3px red;}
    42%  {color: red; font-size: 1.3em; text-shadow: 4px 0px 4px orange, -4px 0px 4px orange, 0px 4px 1px orange, 0px -4px 4px orange;}
    56%  {color: orange; font-size: 1.4em; text-shadow: 5px 0px 5px yellow, -5px 0px 1px yellow, 0px 5px 5px yellow, 0px -5px 5px yellow;}
    80% {color: yellow; font-size: 1.5em; text-shadow: 6px 0px 6px green, -6px 0px 6px green, 0px 6px 6px green, 0px -6px 6px green;}
    100% {color: green; font-size: 1.6em; text-shadow: 7px 0px 7px blue, -7px 0px 7px blue, 0px 7px 7px blue, 0px -7px 7px blue;}
}

@keyframes repete{  /* Plays 4x (intentional spelling) */

    0%  {color: blue; font-size: 1.1em; text-shadow: 2px 0px 2px purple, -2px 0px 2px purple, 0px 2px 2px purple, 0px -2px 2px purple;}
    16%  {color: purple; font-size: 1.2em; text-shadow: 3px 0px 3px red, -3px 0px 3px red, 0px 3px 3px red, 0px -3px 3px red;}
    38%  {color: red; font-size: 1.3em; text-shadow: 4px 0px 4px orange, -4px 0px 4px orange, 0px 4px 1px orange, 0px -4px 4px orange;}
    58%  {color: orange; font-size: 1.4em; text-shadow: 5px 0px 5px yellow, -5px 0px 1px yellow, 0px 5px 5px yellow, 0px -5px 5px yellow;}
    74% {color: yellow; font-size: 1.5em; text-shadow: 6px 0px 6px green, -6px 0px 6px green, 0px 6px 6px green, 0px -6px 6px green;}
    100% {color: green; font-size: 1.6em; text-shadow: 7px 0px 7px blue, -7px 0px 7px blue, 0px 7px 7px blue, 0px -7px 7px blue;}
}

/*  Example of use
*
*  <div id="stuck">
*    <span id="l1">L</span>
*    <span id="l2">O</span>
*    <span id="l3">A</span>
*    <span id="l4">D</span>
*    <span id="l5">I</span>
*    <span id="l6">N</span>
*    <span id="l7">G</span>
*  </div>
*/