Ajax Loader
HTML
<?xml version="1.0" encoding="utf-8"?>
1
<?xml version="1.0" encoding="utf-8"?>
2
<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="0,0,360,380">
3
<g fill="#fff">
4
<path fill-opacity="0.5" d="M0,70l280-68v68"/>
5
<path d="M220,70h-220v239c0,40,30,70,70,70h219c40,0,70,-30,70,-70v-169c0,-40,-30,-70,-70,-70zM300,240h-172v11c0,20,14,25,45,25h22c38,0,40,-10,40,-21h66v8c0,47-42,58-93,58h-53c-47,0-96-9-96-89v-18c0-71,35-87,87-87h49c75,0,106,16,106,81zM180,170c-46,0-52,4-52,27h103C232,175,222,170,180,170z"/>
6
</g>
7
</svg>
 
CSS
body {
1
body {
2
  background-color: #222;
3
}
4
 
5
svg {
6
  margin: 5%;
7
  height: 90%;
8
  width:90%;
9
  position: absolute;
10
}
11
 
12
path {
13
  stroke-dashoffset:0;
14
  stroke-dasharray:300;
15
  animation: draw 2s linear infinite;
16
  fill-opacity: 0;
17
  stroke: #fff;
18
}
19
 
20
@keyframes draw {
21
  100% {
22
    stroke-dashoffset: 1200;
23
  }
24
}
 

SVG Logo Spiller

CSSDeck G+