loader設置用コードsample01

サイトにloaderを設置する基本形。

先ずHTML

<div class="loader_wrap">
		<img src="./images/loader-logo.svg" width="350px" alt="Kureai BAKERY" />
		</div>

続いてscss

.loader_wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #606060;
  z-index: 9999;
}

javascriptは以下

jQuery(function() {
    //loader
    const loader = jQuery('.loader_wrap');
    jQuery(window).on('load', function () {
        loader.fadeOut();
    });
    setTimeout(function () {
        loader.fadeOut();
    }, 3000);
});