<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<style>
body {
background: #fff;
}
.test {
position: relative;
width: 100px;
height: 100px;
}
.test span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 20px;
}
.test svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke-dasharray: 1%, 300%;
stroke-dashoffset: 0%;
stroke: #ED6E5C;
stroke-linecap: round;
fill: none;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.test svg {
animation: first1 3s linear infinite;
-moz-animation: first1 3s linear infinite;
-webkit-animation: first1 3s 0 linear infinite;
-o-animation: first1 3s 0 linear infinite;
}
@-webkit-keyframes first1 {
0% {
stroke-dasharray: 0%, 250%;
stroke-dashoffset: 0%;
}
50% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: 0%;
}
100% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: -250%;
}
}
@-moz-keyframes first1 {
0% {
stroke-dasharray: 0%, 250%;
stroke-dashoffset: 0%;
}
50% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: 0%;
}
100% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: -250%;
}
}
@-o-keyframes first1 {
0%;
{
stroke-dasharray: 0%, 250%;
stroke-dashoffset: 0%;
}
50% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: 0%;
}
100% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: -250%;
}
}
@-keyframes first1 {
0%;
{
stroke-dasharray: 0%, 250%;
stroke-dashoffset: 0%;
}
50% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: 0%;
}
100% {
stroke-dasharray: 250%, 250%;
stroke-dashoffset: -250%;
}
}
</style>
</head>
<body>
<div class="test">
<svg id="svgForStroke" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="40%" stroke-width="10%" />
</svg>
</div>
</body>
</html>
from:http://www.oschina.net/code/snippet_1029305_36817