Skip to content

Instantly share code, notes, and snippets.

@mdarens

mdarens/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:24
Show Gist options
  • Save mdarens/59ba8614a3f8f376b71d to your computer and use it in GitHub Desktop.
Save mdarens/59ba8614a3f8f376b71d to your computer and use it in GitHub Desktop.
Download ZIP
client server connection animation http://output.jsbin.com/dubemogole
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
svg {
width: 3em;
height: 1em;
}
line {
stroke: #000;
transform: skewX(0deg);
stroke-width: 3;
stroke-dasharray: 3 9 6 9 6 6 3 9 3 3 3;
stroke-dashoffset: 240;
animation: wut 6s infinite ease-out;
}
line + line {
stroke-dasharray: 3 3 3 9 3 6 6 9 6 9 3;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-delay: 3s;
}
@keyframes wut {
50% {
transform: skewX(30deg);
}
100% {
transform: skewX(0deg);
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<i class="fa fa-desktop"></i>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g>
<line fill="none" id="svg_1" y2="6" x2="320" y1="6" x1="0"/>
<line fill="none" id="svg_1" y2="12" x2="320" y1="12" x1="0"/>
</g>
</svg>
<i class="fa fa-server"></i>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<i class="fa fa-desktop"></i>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g>
<line fill="none" id="svg_1" y2="6" x2="320" y1="6" x1="0"/>
<line fill="none" id="svg_1" y2="12" x2="320" y1="12" x1="0"/>
</g>
</svg>
<i class="fa fa-server"></i>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">svg {
width: 3em;
height: 1em;
}
line {
stroke: #000;
transform: skewX(0deg);
stroke-width: 3;
stroke-dasharray: 3 9 6 9 6 6 3 9 3 3 3;
stroke-dashoffset: 240;
animation: wut 6s infinite ease-out;
}
line + line {
stroke-dasharray: 3 3 3 9 3 6 6 9 6 9 3;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-delay: 3s;
}
@keyframes wut {
50% {
transform: skewX(30deg);
}
100% {
transform: skewX(0deg);
stroke-dashoffset: 0;
}
}</script>
</body>
</html>
Raw
jsbin.dubemogole.css
svg {
width: 3em;
height: 1em;
}
line {
stroke: #000;
transform: skewX(0deg);
stroke-width: 3;
stroke-dasharray: 3 9 6 9 6 6 3 9 3 3 3;
stroke-dashoffset: 240;
animation: wut 6s infinite ease-out;
}
line + line {
stroke-dasharray: 3 3 3 9 3 6 6 9 6 9 3;
animation-direction: reverse;
animation-timing-function: ease-in;
animation-delay: 3s;
}
@keyframes wut {
50% {
transform: skewX(30deg);
}
100% {
transform: skewX(0deg);
stroke-dashoffset: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment