Fliggy Loading

fliggy-loading.markdown

Fliggy Loading

A Pen by Tang Wei on CodePen.

License.

index.html

<div id="app"></app>

script.babel

class Application extends React.Component {
  render() { 
    return <div className="loading" dangerouslySetInnerHTML={{__html: 
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" width="180" height="180" viewBox="0 0 180 180">
  <rect width="180" height="180" fill="#ccc" rx="12" ry="12"/>
  <g transform="matrix(.05 0 0 -.05 16 170)" fill="none" stroke-width="80">
    <defs>
      <path d="M1332 2059c-280-36-499-217-568-469-25-92-23-268 5-373 70-265 248-408 549-439 279-29 495 77 602 295 43 89 65 164 76 257l6 59 64 41c35 22 77 57 94 78 38 45 86 144 95 195 7 35 6 37-20 37-37 0-65 17-65 39 0 11 13 49 30 85 29 65 42 108 54 174l6 32-433-1c-237-1-460-5-495-10z" id="a"/>
    </defs>
    <use xlink:href="#a" stroke="#ccc"/>
    <use xlink:href="#a" stroke-dasharray="4150,650" stroke="#fff" stroke-linejoin="round">
      <animate attributeName="stroke-dashoffset" dur="1s" to="4800" repeatCount="indefinite" calcMode="spline" keyTimes="0; 1" keySplines=".1,.2,.55,-0.3"/>
    </use>
  </g>
</svg>`
}} />}
}
React.render(<Application />, document.getElementById('app'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

style.css

.loading{
  width:90px;
  height:90px;
}
.loading svg{
  width:100%;
  height:100%;
}