node1
node2
node3

Loading Display

プリロード画面を設定できます。
具体的な実装としては、この機能で指定した要素を、ページ内の要素の読み込み・radix.init の実行の両方が完了したタイミングで delay をかけて hide クラスを追加し非表示になるようにします。

Options

const radix = new Radix({
    preload: {
        active: false, // 機能のオン、オフ(boolean)
        selector: '',  // プリロード画面の要素(CSSセレクタ)
        class: 'hide',  // ロード完了後に追加するクラス
        delay: 200,  // 遅延(ミリ秒)
        preventScroll: false // プリロード画面を表示している間スクロールを禁止するか
    }
});

デフォルトでは active プロパティが false であるため、機能を利用するには true に変更する必要があります。

もしページが軽量でほとんど読み込む内容がない場合に、遅延なしでハイドアニメーションをかけると、画面がフラッシュしたようなチカチカした印象を与えます。それを避けるために、ローディング画面を最低限 0.2 秒は表示するようにデフォルトでは設定しています。

Example

このページをロードするとローディングアニメーションが表示されます(見逃した人はリロードしてください。最低でも 0.2 秒表示されます)。

オプションを変更した例はトップページです。トップページでは delay の設定が違う為、アニメーションがより長く表示されます。

angle_top