javascriptローディングアニメーションについて

Question

サイト訪問時にローディングアニメーションをつけたいと思いトライ中です。
gifアニメーションを使用しています。

※したいこと
アニメーションをフェードアウトしてゆっくり終わるようにしてメインページを表示したい

※つまずいているとこ
フェードアウトするように指定したのに効かない
いろんなサイトを確認し、cssでフェードアウトする方法も試してみたのですが、ゆっくり消えないで、パッと消える状態です。
toggleでクラスのつけ外しで、フェードアウトするような、指定も試して見ましたが、理解不十分なこともあり、うまくいきませんでした。

未熟者なので、説明もわかりずらいかと思いますが、教えたいただきたいです。
よろしくお願いします。

※(script)

window.onload = function(){
const loading = document.getElementById('is-loading');
loading.classList.add('completed');
setTimeout(function(){

        $('#is-loading').fadeOut();
        loading.style.display = "none";
    }, 4500);

};

※(css)

.completed {
opacity: 1;
visibility: visible;
}

Comments

[m.ts10806]

JasperReportsは本件とどう関係するのでしょうか。

[yambejp]

ゆっくり終わる、の意味がわかりません

[hyugo]

JasperReportsはミスです

[hyugo]

フェードアウトですね。

Answer 1

windowのloadをまってフェードアウトするだけなら

$(window).on('load',function(){
  $('#is-loading').fadeOut();
});

Comments

[hyugo]

回答ありがとうございます。
フェードアウトさせるのすごいシンプルにできるんですね！
gifアニメーションを使っているので、切りのいいところでフェードアウトさせたいのですが、その場合のおすすめのやり方を教えていただくことできますか？

[yambejp]

gifアニメのタイミング調整は困難なのでcanvasやsvgでアニメをするとよいかもしれません