.LoadingPill
    {
    background-color:#333333;
    border-radius:10px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.6);
    display:inline-block;
    padding:20px 20px 30px 20px;
    position:relative;
    top:20%;
    }

@keyframes spinner {to {transform: rotate(360deg);}}
@-webkit-keyframes spinner {to {-webkit-transform: rotate(360deg);}}
 
.spinner
    {
    width: 110px;
    height: 80px;
    }
 
.spinner:before
    {
    /*content: 'Loading…';*/
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -30px;
    margin-left: -30px;
    }
 
.spinner:not(:required):before
    {
    content: '';
    border-radius: 50%;
    border: 8px solid transparent;
    border-top-color: #F50210;
    border-bottom-color: #F50210;
    animation: spinner 1.5s ease infinite;
    -webkit-animation: spinner 1.5s ease infinite;
    }
    

/*-------------------------------------------*/    
.SpinnerBar
    {
    animation: SpinnerProcessing 180s ease-out 1;
    -webkit-animation: SpinnerProcessing 180s ease-out 1;
    }
    
@-webkit-keyframes SpinnerProcessing
    {
    0%   {width: 0%;}
    100%  {width: 98%;}
    }
@keyframes SpinnerProcessing
    {
    0%   {width: 0%;}
    100%  {width: 98%;}
    }