Animated Loading

by rgthree

HTML

<span class="loading">
    <span class="spinner"></span>
    Loading<span class="ellipsis">...</span>
</span>
<br /><br />
<span class="loading2">Loading</span>

CSS

body {font:normal normal normal 12px/1 Helvetica, Arial, sans-serif; color:#222;}

@-webkit-keyframes pulse {  
  0% {border-width:8px; border-color:rgba(0,0,0,0.5);}
  100% {border-width:1px; border-color:rgba(0,0,0,0.00005);}
}
@-moz-keyframes pulse {  
  0% {border-width:8px; border-color:rgba(0,0,0,0.5);}
  100% {border-width:1px; border-color:rgba(0,0,0,0.00005);}
}

@-webkit-keyframes ellipsis {  
  0%, 32% {width:3px;}
  33%, 66% {width:6px;}
  66%, 100% {width:9px;}
}
@-moz-keyframes ellipsis {  
  0%, 32% {width:3px;}
  33%, 66% {width:6px;}
  66%, 100% {width:9px;}
}

.loading {vertical-align:middle;}
.spinner,
.loading2:before {
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:16px;
    height:16px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
           
    background: transparent;
    background-clip:content-box;
    border:8px solid rgba(0,0,0,0.25);
    
    -webkit-animation:pulse 0.75s ease-in-out 0s infinite alternate;
    -moz-animation:pulse 0.75s ease-in-out 0s infinite alternate;
}

.ellipsis,
.loading2:after {
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    width:3px;
    -webkit-animation:ellipsis 1.5s linear 0s infinite normal;    
    -moz-animation:ellipsis 1.5s linear 0s infinite normal;
}

.loading2 {position:relative; display:inline-block; padding-left:23px;}
.loading2:before {content:"\0020"; position:absolute; left:0px; top:50%; margin-top:-8px;}
.loading2:after {content:"..."; vertical-align:text-bottom;}