ローディング画面でSVGアニメーション - PHP,MySQL,Flex,JSな日々＋イラストとか

ローディングライブラリが出てましたので、SVGアニメーションのサンプルを動かしてみました。

f:id:haru-komugi:20141015125556j:plain

サンプルはこちら
http://moeten.info/js/20141015_loadingSvgAnimation/

ソースコードはこちら

<html>
<head>
  <script src="progressbar.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
  <path fill-opacity="0" stroke-width="0.5" stroke="#f4f4f4" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
  <path id="heart-path" fill-opacity="0" stroke-width="0.6" stroke="#555" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
</svg>
<script>

  //パスの読み込み
  var svgPath = document.getElementById("heart-path");
  var path = new ProgressBar.Path(svgPath, {
    duration: 300
  });


  //パスアニメーション
  var cnt = 0;
  var doPath = function(){

    if( cnt >= 1 ){
      return false;
    }

    path.animate( cnt , {
      duration: 600
    }, function () {
      console.log('Animation has finished');

    });
    cnt += 0.1;

    setTimeout( doPath , Math.random() * 1000 );

  };
  doPath();

</script>
</body>
</html>