Order site
By contacting me you will receive a reliable and knowledgeable contractor who will quickly and efficiently implement any task for you and your business.
The last notes
All English-language materials have been translated fully automatically using the Google service
To install your own preloader, you just need to copy the code below
The preloader itself can be found here icons8.com
In the footer.php file of your template, add an include area with our template code
body
$ APPLICATION-> IncludeFile (SITE_DIR. "include / preloader.php", Array (), Array ("MODE" => "html", "NAME" => 'Custom preloader'));
Code of the file preloader.php
<div class = "pWrap" style = "display: none">
<div class = "pInner">
<svg xmlns: svg = "http://www.w3.org/2000/svg" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: //www.w3 .org / 1999 / xlink "version =" 1.0 "width =" 48px "height =" 48px "viewBox =" 0 0 128 128 "xml: space =" preserve "> <g> <path d =" M64 0a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm29.86 12.2a2.8 2.8 0 1 1-3.83 1.02 2.8 2.8 0 0 1 3.83-1.02zm22.16 21.68a3.15 3.15 0 1 1-4.3-1.15 3.15 3.15 0 0 1 4.3 1.15zm. 87 60.53a4.2 4.2 0 1 1-1.57-5.7 4.2 4.2 0 0 1 1.54 5.73zm7.8-30.5a3.85 3.85 0 1 1-3.85-3.85 3.85 3.85 0 0 1 3.85 3.84zm-30 53.2a4.55 4.55 0 1 1 1.66-6.23 4.55 4.55 0 0 1-1.67 6.22zM64 125.9a4.9 4.9 0 1 1 4.9-4.9 4.9 4.9 0 0 1-4.9 4.9zm-31.06-8.22a5. 25 5.25 0 1 1 7.17-1.93 5.25 5.25 0 0 1-7.14 1.93zM9.9 95.1a5.6 5.6 0 1 1 7.65 2.06A5.6 5.6 0 0 1 9.9 95.1zM1.18 63.9a5.95 5.95 0 1 1 5.95 5.94 5.95 5.95 0 0 1-5.96-5.94zm8.1-31.6a6.3 6.3 0 1 1 2.32 8.6 6.3 6.3 0 0 1-2.3-8.6zM32.25 8.87a6.65 6.65 0 1 1-2.44 9.1 6.65 6.65 0 0 1 2.46-9.1z "fill =" # fff "/> <animateTransform attributeName =" transform "type =" rotate "values =" 0 64 6 4; 30 64 64; 60 64 64; 90 64 64; 120 64 64; 150 64 64; 180 64 64; 210 64 64; 240 64 64; 270 64 64; 300 64 64; 330 64 64 "calcMode =" discrete "dur =" 1080ms "repeatCount =" indefinite "> </animateTransform> </g> </svg>
</div>
</div> Add to template styles
.pWrap {background: rgba (0,0,0,0.7); height: 100%; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; }
.pInner {width: 50px; height: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
Add to template script
var lastWait = [];
/ * non-xhr loadings * /
BX.showWait = function (node, msg)
{
node = BX (node) || document.body || document.documentElement;
msg = msg || BX.message ('JS_CORE_LOADING');
var container_id = node.id || Math.random ();
var obMsg = node.bxmsg = document.body.appendChild (BX.create ('DIV', {
props: {
id: 'wait_' + container_id,
className: 'bx-core-waitwindow'
},
text: msg
}));
setTimeout (BX.delegate (_adjustWait, node), 10);
$ ('. pWrap'). show ();
lastWait [lastWait.length] = obMsg;
return obMsg;
};
BX.closeWait = function (node, obMsg)
{
$ ('. pWrap'). hide ();
if (node &&! obMsg)
obMsg = node.bxmsg;
if (node &&! obMsg && BX.hasClass (node, 'bx-core-waitwindow'))
obMsg = node;
if (node &&! obMsg)
obMsg = BX ('wait_' + node.id);
if (! obMsg)
obMsg = lastWait.pop ();
if (obMsg && obMsg.parentNode)
{
for (var i = 0, len = lastWait.length; i
You can call a custom preloader like this:
BX.showWait(); And hide like this:
BX.closeWait();
Based on material:
Comments