display:none;と設定した要素のサイトへの負荷についてお聞きします。

ローディングアイコンをサイトに実装しようと思っています。

閲覧ありがとうございます。いつも助かっております。

windowのload時にページ内容の要素のopacityを1にして、ローディングアイコンの要素のdisplayをnoneにするイベントを追加しようと思っています。
ローディングアイコンは画像は使わずtransformやanimationなどを用いて作ろうと思っています。
その場合、ローディングアイコンのdisplayをnoneとしても表示はされていないだけで、アニメーションを動かし続けるとサイトの表示に負荷を掛け続けるのでしょうか。
それともdisplayをnoneにした場合はアニメーションは止まるのでしょうか。

ご回答よろしくお願いします。

コードは下記のような形となります。

HTML
1<div id="my-loading-icon"></div><!-- ローディングアイコン -->
2<div id="page" style="opacity:0;"></div><!-- ページ内容 -->
3<script>
4    'use strict';
5    {
6        const loadingIcon = document.querySelector('my-loading-icon')
7        const page = document.getElementById('page');
8        const sleep = ms => new Promise(res => setTimeout(res, ms));
9        function showPage() {
10            page.animate([{opacity: '0'}, {opacity: '1'}], 300);
11            page.style.opacity = 1;
12            loading.animate([{opacity: '1'}, {opacity: '0'}], 100);
13            loading.style.display = 'none';
14        }
15        window.addEventListener('load', () => {
16            showPage();
17        });
18        (async()=>{
19            await sleep(3000);
20            if ( page.style.opacity === 0 ) {
21                showPage();
22            }
23        });	
24    }
25</script>