HTML
<div class="container">
<a class="trigger" href="#">Start / Restart</a>
<div class="graph">
<div id="layer-point" class="point"></div>
<div id="layer-pulse" class="pulse"></div>
<div class="line"></div>
<div id="layer-point-1" class="point-1"></div>
<div id="layer-pulse-1" class="pulse-1"></div>
<div class="line-1"></div>
<div id="layer-point-2" class="point-2"></div>
<div id="layer-pulse-2" class="pulse-2"></div>
<div class="line-2"></div>
<div id="layer-point-3" class="point-3"></div>
<div id="layer-pulse-3" class="pulse-3"></div>
<div class="line-3"></div>
<div id="layer-point-4" class="point-4"></div>
<div id="layer-pulse-4" class="pulse-4"></div>
</div>
</div>
CSS
html, body {
background: #222;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
color:#fff;
}
* {
margin: 0;
padding: 0;
outline: none;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.graph {
width: 960px;
height: 300px;
margin: 0 30px;
padding-top: 450px;
position: relative;
}
/* GRAPH */
.line,
.line-1,
.line-2,
.line-3 {
background: #3498db;
width: 0px;
height: 1px;
}
.running .line {
transform: rotate(-10deg);
transform-origin: 0 -2em;
animation: paint 1s linear forwards;
}
.running .line-1 {
transform: rotate(30deg);
transform-origin: 14em 30em;
animation: paint-1 1s 1s linear forwards;
}
.running .line-2 {
transform: rotate(-65deg);
transform-origin: 20em -22em;
animation: paint-2 1s 2s linear forwards;
}
.running .line-3 {
transform: rotate(48deg);
transform-origin: 51em 39em;
animation: paint-3 1s 3s linear forwards;
}
.running .point,
.running .point-1,
.running .point-2,
.running .point-3,
.running .point-4 {
background-color: skyblue;
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
z-index: 99;
transform: scale(0);
animation: point 0.1s linear forwards;
}
.running .pulse,
.running .pulse-1,
.running .pulse-2,
.running .pulse-3,
.running .pulse-4 {
width: 12px;
height: 12px;
border-radius: 30px;
border: 1px solid skyblue;
box-shadow: 0 0 5px skyblue;
position: absolute;
transform: scale(0);
animation: pulse 1s ease-out;
}
/* COORDINATE POINTS */
.point {
top: 445px;
left: 0;
}
.point-1 {
top: 411px;
left: 196px;
}
.point-2 {
top: 511px;
left: 372px;
}
.point-3 {
top: 151px;
left: 544px;
}
.point-4 {
top: 371px;
left: 744px;
}
.pulse {
top: 443px;
left: -2px;
}
.pulse-1 {
top: 409px;
left: 194px;
}
.pulse-2 {
top: 509px;
left: 370px;
}
.pulse-3 {
top: 149px;
left: 542px;
}
.pulse-4 {
top: 369px;
left: 742px;
}
/* CONTROL LAYER DELAY */
#layer-point, #layer-pulse { animation-delay: 0s; }
#layer-point-1, #layer-pulse-1 { animation-delay: 0.9s; }
#layer-point-2, #layer-pulse-2 { animation-delay: 1.9s; }
#layer-point-3, #layer-pulse-3 { animation-delay: 2.9s; }
#layer-point-4, #layer-pulse-4 { animation-delay: 4s; }
/* ANIMATION */
@keyframes paint {
0% { width: 0px;}
100% {
width: 200px;
box-shadow: 0px 0px 5px 1px #3498db;
}
}
@keyframes paint-1 {
0% { width: 0px;}
100% {
width: 200px;
box-shadow: 0px 0px 5px 1px #3498db;
}
}
@keyframes paint-2 {
0% { width: 0px;}
100% {
width: 400px;
box-shadow: 0px 0px 5px 1px #3498db;
}
}
@keyframes paint-3 {
0% { width: 0px;}
100% {
width: 300px;
box-shadow: 0px 0px 5px 1px #3498db;
}
}
@keyframes point {
0% { transform: scale(0,0); }
100% { transform: scale(1,1); }
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0;
}
10% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.75);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
/* Trigger button for javascript */
.trigger {
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
color: #fff;
border: 1px solid skyblue;
padding: 15px;
display: block;
margin: 30px auto;
width: 150px;
}
