Как сделать такую красивую подзагрузку?

Question

[limboo]

Приветствую,
возник вопрос как реализовать такую-же красивую презагрузку страницы с кубиком? https://www.xeovo.com/

Пытался сделать просто с помощью css и не особо получилось. Я не силён в программирование. Пытался что-то найти наткнулся вот это, но не особо понял как реализовать https://css-tricks.com/prefetching-preloading-preb...
Даже не знаю как правильно называется это на английском языке. Preload?

Спасибо!

Answer 1

[automatik]

www.w3schools.com/howto/howto_css_loader.asp

или так (делаем спиннер, даём ему класс .spn_hol, затем fadeOut на 500мс):

$(window).bind("load", function() {

    "use strict";
    
    $(".spn_hol").fadeOut(500);
});

Comments

[limboo]

Сейчас попробую

[automatik]

limboo: limboo: в частности на этом сайте сделано так:

есть div preloader:

<div class="preloader">
        <div class="sk-cube-grid">
          <div class="sk-cube sk-cube1"></div>
          <div class="sk-cube sk-cube2"></div>
          <div class="sk-cube sk-cube3"></div>
          <div class="sk-cube sk-cube4"></div>
          <div class="sk-cube sk-cube5"></div>
          <div class="sk-cube sk-cube6"></div>
          <div class="sk-cube sk-cube7"></div>
          <div class="sk-cube sk-cube8"></div>
          <div class="sk-cube sk-cube9"></div>
        </div>
    </div>

и есть функция, которая его скрывает при загрузке страницы (внутри active.js лежит):

$(document).ready(function(){
		$('.preloader').fadeOut('slow', function(){
			$(this).remove();
		});
	});

[limboo]

automatik: Спасибо! Получилось!

Answer 2

[Vova Bd]

Вот несколько крутых прелоадеров и спиннеров для сайта. Там можно посмотреть исходный код.Может поможет ...
beloweb.ru/novichkam/skachat-neskolko-krutyih-prel...