Pure CSS Graph

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; }
JAVASCRIPT
$(document).ready(function() { $('.graph').removeClass('running'); $('.trigger').click(function() { $('.graph').removeClass('running').delay(10).queue(function(next){ $(this).addClass('running'); next(); }); return false; }); });
Expand for more options Login