Kimera - Ui kit library for the web coding

The tester theme of official project in github

➜ LOADER AND LAZY:

The loader is divided into 2 sections:

> The first hides the page until the document, excluding media, is available in its basic entirety.

> In the second case, thanks to a specific lazy, it will keep the elements chosen as "loading in progress".

The whole process is however managed by a single optimized source which is divided into 3 sectors: 1) the document collector, 2) the controller of its generic status, 3) the observer (who will tell the system if an object is already in the view and how to behave based on available settings)

To better understand it, consult the wiki on github

❯❯ The spinner:

Spinner is css waiting animation. You can change it theme or inner theme file.

To use the page loader just insert this as the last tag, before closing the body:

<div class="loader"><span class="spinner"></span></div>

❯❯ The lazy load:

The lazyload not only acts as a magic cloth as things load (see images and videos) but can also load txt, html and more elements within the page.

Here's how to include a small file or data inside your page (with this same system we loaded the side menus and some small non-SEO clutter on this page) :

<div class="lazy"><div data-src="./my-sub-element-of-page.html"></div></div>

To keep in mind: being a system designed for the document it is valid for small things but it is absolutely not to be compared to an include php side or a server side includeer.


Other preload / lazy load box:

The lazy loading system is used in many cases ... On the page as a big Loader, for loading small things, but also to wait for several ajax-style loads such as videos and images ...