ロゴがアニメーションした後背景が右から左に流れて画面遷移するローディング（jQuery使用）

vivus.js というSVG アニメーションを表示するライブラリを使ってロゴのアウトラインのアニメーションと左から右に背景が流れる画面遷移を組み合わせた、ちょっとリッチなローディングを紹介します。

はじめに
コード
最後に

はじめに

まずデモページはこちら。

最初にSVGで作成したロゴがアウトラインをなぞるように登場、ロゴが消えた後は背景画像が左から右に流れるように画面遷移するダイナミックなローディングになります。

いつものようにjQueryを読み込みます。

また、今回はvivus.jsというライブラリを使用しますのでjQueryの下にこちらも読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>

自作のJSはさらに下に読み込むようにしましょう。

コード

<div id="loading">
    <div id="loadingLogo">
        <svg version="1.1" id="mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" width="780px" height="200px" viewBox="0 0 780 200" style="enable-background:new 0 0 780 200;" xml:space="preserve">
        <style type="text/css">
            .st0{fill:#FFFFFF;}
        </style>
        <g>
            <path class="st0" d="M200.571,68.003c-1.6,2.199-4.2,2.8-10,2.8h-74.399c6.6,36.999,31,72.398,85.398,92.598l-0.2,2.399
                c-14.8,3-23.4,12.601-25.8,29.4c-42.599-27.4-56.399-77.199-61.599-117.598h-0.2c-6.6,47.799-27.6,89.198-101.599,117.598
                l-1.6-2.601c53.599-35.999,68.599-76.598,72.799-121.797H11.774l-1-3.2h72.799c1.4-17.2,1.4-41,1.4-61.599l40.399,3.6
                c-0.2,2.8-1.8,4.6-8,5.2c-0.4,18.2-0.6,35.8-2.4,52.799h39.2l16.399-21L200.571,68.003z"/>
            <path class="st0" d="M374.772,69.003l25.599,19.199c-1.4,2.2-4,2.8-9.799,2.8h-30.4c-5.2,21.6-11.8,39-21.799,53.199
                c35.199,9.601,47.399,25.4,47.399,36.8c0,8.2-6.2,14-14.8,14c-2.6,0-5.4-0.601-8.4-1.8c-8.399-8.4-23-19.601-41.999-30.4
                c-21.4,16.8-53.599,26.8-104.199,32.2l-1-2.4c38.799-10,65.399-22.6,83.398-40.999c-8.4-4-17.4-7.8-26.6-11c-2,4-3.6,7.6-5.2,10.8
                c-2.6,1.4-6.2,2-10.2,2c-6.2,0-13.399-1.4-20.6-4.4c6.8-13.399,17.4-36.399,26.6-57.999h-51.199l-1-3.199h53.599
                c7.2-17.2,13.6-33.2,16.4-42.2l37.399,6c-0.6,3-2.8,4.6-8.8,4.8c-3,7-7.8,18.6-13.4,31.4h64.799L374.772,69.003z M357.772,69.803
                c2.2-7.2,4.4-19.8,5.6-28.8H245.774c0.6,3.2,0.8,6,0.8,8.8c0,12.2-6,24.2-19.2,24.2c-7.8,0-15.2-4.2-15.2-13
                c0-6.2,4.8-11.4,10.6-14.2c7-3.2,15.8-12.2,16-21.799h2.4c1.8,4.6,3.2,8.8,4,12.8h45.199v-32.8l37.6,3.6c-0.4,2.6-2,4.2-7.6,5v24.2
                h41.2l14-14l24.2,22.8c-1.6,1.8-3.6,2.4-7.8,2.6c-8.2,7.2-22,16.6-32.8,21.8L357.772,69.803z M294.373,91.002
                c-6.6,15-14,31.399-20,44.8c13,0.399,24.6,1.399,35,2.799c8.8-13.2,14.6-28.799,18.2-47.599H294.373z"/>
            <path class="st0" d="M572.973,22.403l27.6,19.8c-1.4,2.2-4,2.8-9.801,2.8h-71.199v41.999h25.801l15.4-19.6l27.998,20
                c-1.6,2.2-4.398,2.8-10,2.8H425.375l-1-3.2h65.199V45.003h-77l-1-3.2h78V4.404l38.6,3.6c-0.4,3-2.4,4.8-8.602,5.6v28.2h38.4
                L572.973,22.403z M540.773,118.202l11-14.2l28.799,20.2c-1.4,1.6-4,3.6-8.6,4.6v57.199c0,0.2-8,6.2-29,6.2v-14.2h-75.6v6
                c0,0.6-4.199,10.6-28.398,10.6v-87.999l30.199,11.601H540.773z M467.373,174.8h75.6v-53.399h-75.6V174.8z"/>
            <path class="st0" d="M753.373,14.004l28.199,21.2c-1.199,1.6-3.801,3.4-7.801,4.2V182.8c0,0.4-7.6,8.6-29.998,8.6v-20.6h-77.199v11
                c0,4-11.6,12-25,12h-4.4V16.803l31.199,12.4h73.4L753.373,14.004z M743.773,32.603h-77.199v64.399h77.199V32.603z M666.574,167.601
                h77.199v-67.399h-77.199V167.601z"/>
        </g>
        </svg>
    </div>
</div>
<div class="loadingBg"></div>

<div class="wrapper">
    <div class="mainVisual">
        <p>メインビジュアル</p>
    </div>
    <div class="container">
        <section></section>
        <section></section>
        <section></section>
    </div>
</div>

さらにこのsvgをVisual Studio Codeなどのテキストエディタで開くことで上記のような<svg version=”1.1″ … >～</svg>になること思います。そこで上記のようにコードを抜き出して上の同じく<svg version=”1.1″ … >～</svg>の部分に差し替えてみてください。

その時に<svg>にはid=”mask”を追加しておきます。

.wrapper {
  width: 100%;
}
.mainVisual {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  background-color: rgb(99, 99, 99);
  color: #fff;
}
.container {
  max-width: 1000px;
  padding: 0 15px; 
  margin: 0 auto;
}
section {
  background-color: rgb(126 121 195);
  width: 100%;
  height: 500px;
  border-radius: 15px;
  margin: 50px 0;
}

/*========= Loading ===============*/

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    background:rgb(220, 50, 50);
    text-align:center;
    color:#fff;
}

#loadingLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loadingLogo svg{
    width:400px;
}

/* SVGアニメーション */

#mask path {
        fill-opacity: 0;
        transition: fill-opacity .5s;
        fill: none; 
        stroke: #fff;
    }

#mask.done path{
      fill: #fff;
      fill-opacity: 1;
      stroke: none;
    }

/* 画面遷移 */

.loadingBg {
  display: none;
}

body.appear .loadingBg{
  display: block;
  content: "";
  position:fixed;
  z-index: 99;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: rgb(220, 50, 50);
  animation: slideAnime 1.2s ease-in-out forwards;
}

@keyframes slideAnime {
0% {
  transform-origin:left;
  transform:scaleX(0);
}
50% {
  transform-origin:left;
  transform:scaleX(1);
}
50.001% {
  transform-origin:right;
}
100% {
  transform-origin:right;
  transform:scaleX(0);
}
}

.wrapper{
opacity: 0;
}

body.appear .wrapper{
animation: appearAnime 1s .8s  forwards;
opacity: 0;
}

@keyframes appearAnime {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

上のほうにはメインヴィジュアルやコンテンツの内容であるセクションを指定しているものですので、

/========= Loading ===============/

以下を参照してください。

var stroke;
stroke = new Vivus('mask', {
    start: 'manual',
    type: 'scenario-sync',
    duration: 50, //アニメーションの時間設定。
    forceRender: false,
    animTimingFunction: Vivus.EASE,
},
    function () {
        $("#mask").attr("class", "done");
    }
);

$(window).on('load', function () {
    $("#loadingLogo").delay(3000).fadeOut('slow'); // ローディングのロゴを3秒してからフェイドアウト
    stroke.play(); //SVGアニメーションを実行
    
    $("#loading").delay(3000).fadeOut('slow', function () {　//ローディングエリアを3秒でフェードアウト
        $('body').addClass('appear');　//フェードアウトした後でbodyにappearクラス付与
    });
});