JSFiddle - React, Tailwind, and code Playground

Uploading Animation

by Jennifer Perrin

HTML

<h1>Uploading...</h1>
<div class="slider">
	<div class="line"></div>
  <div class="break dot1"></div>
  <div class="break dot2"></div>
  <div class="break dot3"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:100);

body{
  background:#222;
  margin:50px 100px;
}
h1{
  color:#4a8df8;
  font-family: 'Raleway', cursive; 
  font-weight:100; 
  font-stretch:normal;
  font-size:4em;
  
}
.slider{
  position:absolute;
  width:400px;
  height:2px;
  margin-top:6px
}
.line{
  position:absolute;
  background:#4a8df8;
  width:400px;
  height:2px;
  
}
.break{
  position:absolute;
  background:#222;
  width:6px;
  height:2px;  
}

.dot1{
-webkit-animation: loading 2s infinite;
-moz-animation: loading 2s infinite;
-ms-animation: loading 2s infinite;
-o-animation: loading 2s infinite;
animation: loading 2s infinite;
}
.dot2{
-webkit-animation: loading 2s 0.5s infinite;
-moz-animation: loading 2s 0.5s infinite;
-ms-animation: loading 2s 0.5s infinite;
-o-animation: loading 2s 0.5s infinite;
animation: loading 2s 0.5s infinite;
}
.dot3{
-webkit-animation: loading 2s 1s infinite;
-moz-animation: loading 2s 1s infinite;
-ms-animation: loading 2s 1s infinite;
-o-animation: loading 2s 1s infinite;
animation: loading 2s 1s infinite;
}

@keyframes "loading" {
 from { left: 0; }
 to { left: 400px; }
}
@-moz-keyframes loading {
 from { left: 0; }
 to { left: 400px; }
}
@-webkit-keyframes "loading" {
 from { left: 0; }
 to { left: 400px; }
}
@-ms-keyframes "loading" {
	from { left: 0; }
 to { left: 400px; }
}
 @-o-keyframes "loading" {
	from { left: 0; }
 to { left: 400px; }