LOADER&LAZY
Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.
If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework
The loader is a flow element of the page loading system. It activates a fadein on a specific color -> analyzes the link or action -> changes the page. When new page is ready the loader is the first element to activate the chosen color... Passed X seconds (decide you through the spinner) activates a loading icon. When the load is completed, it will fade out and show the viewports.
<body>
...viewport & contents...
<div class="loader active">
<span class="spinner-box">
<div class="yourspinner">
// it is good practice to save your spinner in the theme folder
// remember to synchronize the color of the loader with that of the page
</div>
</span>
</div>
</body>
Another important setting is the "loader-out". It is possible to activate the page out at each link using the target="_self" attribute. This particular creates a smooth transition between pages (in-out).
<a target="_self" href="MyInnerPageUrl">MyInnerPage</a>
At the click the loader will reappear without the spinner and after 270ms will pass to the new page (where the new loader will be ready)
A cordova\phonegap tips
Into config.xml : <preference name="BackgroundColor" value="#YOURCOLORPAGE&LOADER" />
Note:
from v 2.5.3-5 ajaxstatus check is deprecated
If the standard loader loads the basics of the document while keeping it hidden, the [✱ lazyload] load and import all other parts of dom. That's 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.
Over div and span contents, the lazy loading system is used for: img, iframe and videobox
other exemple:
<div class="lazy autocrop ratio-[16:9]">
<img data-src="...">
</div>
<div class="lazy">
<div class="videobox-[player] ratio-[16:9] radius-medium">
<video src="...."></video>
</div>
</div>
//or with experimetal social inclusion:
<div class="lazy">
<div class="videobox-[social] ratio-[16:9] radius-medium settings-[clearui,autostartstop]">
<video src="https://www.facebook.com/...."></video>
</div>
</div>
The basic concepts of framework. The topic: [views]
All classes and main elements of framework. The topic: [classes]