See the Pen Example of a Loading Animation on an SVG Stroke by Russ Gossett (@russgossett) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>Inspired by... A Pen by Chris Coyier on CodePen.
<body> | |
<ul id="nav"> | |
<li><a href="#intro" title="Next Section"><img src="http://placekitten.com/50/50" /></a></li> | |
<li><a href="#second" title="Next Section"><img src="http://placekitten.com/50/50" /></a></li> | |
<li><a href="#third" title="Next Section"><img src="http://placekitten.com/50/50" /></a></li> | |
<li><a href="#fifth" title="Next Section"><img src="http://placekitten.com/50/50" /></a></li> | |
</ul> | |
<div id="intro"> | |
<div class="story"> |
<!-- why not --> | |
<song> | |
<img src="http://placekitten.com/60/60"> | |
<song-meta> | |
<name>Name of Song</name> | |
<artist>Name</artist> | |
<album class="hidden">add Album</album> |
<html> | |
<head> | |
<title></title> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<div class="record"></div> | |
<!--div class="songlist-img-wrap" style="height: 60px;width: 60px;background: #363636;overflow: hidden;position: relative;border-radius:4px;"> | |
<div class="outerCirc" style="height: 50%;width: 50%;border: 16px solid #272727;border-radius: 50%;"> |
ul.box | |
li hello | |
li you the man | |
li yeah you are |
body { | |
background: #fff; | |
} | |
input[type=checkbox] { | |
visibility: hidden; | |
} | |
/* SQUARED GRAY */ |
*{ list-style-type:none; font-family: Gill sans;} | |
li {float: left;} | |
#wrapper { | |
width:300px; | |
height:50px; | |
background: rgb(241, 241, 241); | |
margin: 250px auto; | |
border-radius:5px/10px; |
/* | |
<div class="hi"></div> | |
*/ | |
.hi { | |
width: 150px; | |
height: 300px; | |
background-image: url("http://russgossett.com/portfolio/images/tools-of-trade.png"); | |
-webkit-animation: play 5s steps(4) infinite; |
<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'> | |
<div class="card"> | |
<div class="info"> | |
<h2 class="line-clamp">Headline: Seattle Business Owners Turn To An Unlikely Source Of Consultants: UW Undergrads</h2> | |
<p>6 hours ago</p> | |
</div> | |
</div> | |
<div class="card"> |
See the Pen Example of a Loading Animation on an SVG Stroke by Russ Gossett (@russgossett) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>Inspired by... A Pen by Chris Coyier on CodePen.