Simple Typing Loading

Membuat Typiying Loading dengan animasi CSS Effect

HTML

<div class="typing-loader"></div>

CSS

.typing-loader{
 margin: 60px auto;
 width: 6px;
 height: 6px;
 -webkit-animation: line 1s linear infinite alternate;
 -moz-animation: line 1s linear infinite alternate;
 animation: line 1s linear infinite alternate;
}
 @-webkit-keyframes line{
 0%{ background-color: rgba(0,0,0, 1);
 box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 } 25%{
 background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 }
 75%{
 background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2);
 } }
 @-moz-keyframes line{
 0%{ background-color: rgba(0,0,0, 1); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 }
 25%{
 background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 }
 75%{
 background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2);
 } }
 @keyframes line{ 0%{
 background-color: rgba(0,0,0, 1); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 }
 25%{
 background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 24px 0px 0px 0px rgba(0,0,0,0.2);
 }
 75%{
background-color: rgba(0,0,0, 0.4); box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 24px 0px 0px 0px rgba(0,0,0,2);
 } }

D E M O