Web design standards: everything you need to know for beginners and pros
How do design standards increase website popularity? There is an opinion that web design standards attract users to sites, and most importantly - keep them for a long time. Why?…

Continue reading →

Web Design 2016: Chrome attacks!
From the author: The year 2016 has ended, it is always interesting to go back and see how much the workflow has improved over the previous 12 months. It's amazing…

Continue reading →

Layout adaptive menu
Adaptive menus collapsing into a hamburger on mobile devices can now be seen on almost any site. In this lesson we will learn to make up such menus. In the…

Continue reading →

JQuery preloader

There is a delay when loading the page content asynchronously or sending a request to add / edit. A preloader is an animation during this delay, which allows you to show the user that the request has been sent and you need to wait for it to complete.

There are a huge number of services that allow you to download GIF or SVG preloader. However, in any case, when sending a request, you need to add a preloader to the page structure, and after it is completed, delete it. Doing it manually with each request is inconvenient. In this article, we will look at how to make the process of adding / removing a preloader more convenient using a simple jQuery plugin.

Plugin blank
The plugin will work as shown in the picture:

The plugin should work as follows: to add the preloader to the container, we will call the method:

Javascript
$ (‘# container’). preloader (‘start’);
Accordingly, to remove the preloader, you will need to call:

$ (‘# Container’). Preloader (‘stop’);
Create a jQuery plugin preset:

Javascript
(function ($) {
$ .fn.preloader = function (action) {
return this;
};
} (jQuery));
Here, action is a parameter that indicates whether the preloader is added to the container or deleted. Depending on what action is transferred, you need to call the corresponding function.

Preloader on / off functions
Let’s write the start function:

Javascript
var actions = {
start: function () {
var $ preloader = $ (“<div id = ‘jpreloader’ class = ‘preloader-overlay’> <div class = ‘loader’ style = ‘position: absolute; left: 50%; top: 50%; margin-left: -24px; margin-top: -24px; ‘> <svg width =’ 48px ‘height =’ 48px ‘xmlns =’ http: //www.w3.org/2000/svg ‘viewBox =’ 0 0 100 100 ‘preserveAspectRatio = ‘xMidYMid’ class = ‘uil-default’> … </svg> </div> </div> “);
$ preloader.css ({
‘background-color’: ‘# 4c4c4c’,
‘width’: ‘100%’,
‘height’: ‘100%’,
‘left’: ‘0’,
‘top’: ‘0’,
‘opacity’: ‘0.3’,
‘z-index’: ‘100000’,
‘position’: ‘absolute’
});
this.append ($ preloader);
}
};
The actions object will contain the available action functions. In the start function, we create a new jQuery object containing the preloader, set the necessary styles for it and add it to the container. The preloader itself is a <div> block, absolutely positioned relative to the container and stretched to the full width and height of the container. We give it a deliberately large z-index value so that it overlaps the contents of the container, as well as an opacity value of 0.3.

Please note that the container must have a position property other than static so that the preloader is correctly positioned.

Inside the <svg> … </svg> tags in the preloader is the contents of the animated svg preloader. I do not give his code, because on the Internet you can find a huge number of SVG preloaders at your discretion. Just download your favorite preloader, open it with any text editor and add content to the plugin instead of the <svg> </svg> tags.

Now add the stop function, which will remove the preloader:

Javascript
stop: function () {
this.find (‘. preloader-overlay’). remove ();
}
Everything is extremely simple here: we look inside the container for elements with the preloader-overlay class and delete it.

Calling the corresponding function
Now, depending on the value of action, you need to call the desired function. To do this, use the apply function.

Javascript
$ .fn.preloader = function (action) {
if (actions [action] && typeof actions [action] === ‘function’) {
actions [action] .apply (this);
}
return this;
};
We check whether there is a correspondence in the actions object for the passed parameter and call the desired function.

Consider the full plugin code:

Javascript
(function ($) {
var actions = {
start: function () {
var $ preloader = $ (“<div id = ‘jpreloader’ class = ‘preloader-overlay’> <div class = ‘loader’ style = ‘position: absolute; left: 50%; top: 50%; margin-left: -24px; margin-top: -24px; ‘> <svg width =’ 48px ‘height =’ 48px ‘xmlns =’ http: //www.w3.org/2000/svg ‘viewBox =’ 0 0 100 100 ‘preserveAspectRatio = ‘xMidYMid’ class = ‘uil-default’> … </svg> </div> </div> “);
$ preloader.css ({
‘background-color’: ‘# 4c4c4c’,
‘width’: ‘100%’,
‘height’: ‘100%’,
‘left’: ‘0’,
‘top’: ‘0’,
‘opacity’: ‘0.3’,
‘z-index’: ‘100’,
‘position’: ‘absolute’
});
this.append ($ preloader);
},

stop: function () {
this.find (‘. preloader-overlay’). remove ();
}
};

$ .fn.preloader = function (action) {
actions [action] .apply (this);
return this;
};
} (jQuery));
Using plugin
Using the plugin is extremely simple. Let’s look at an example: let’s say we have some form that is sent to the server using an AJAX request.

Minimalistic website design: features, advantages and disadvantages
In the past few years, web design has alternately reigned in a flat style, now a skeuomorphism, now a material one, then again a flat one ... All of these…

...

The history of web design: from the Stone Age to the era of modern technology
Despite the fact that in the era of the development of web design, the first web pages were just text with links, and you could only dream of a variety…

...

Flat Design Sites (Flat Design): history, principles, examples for inspiration
What do you think is the reason for such a frenzied popularity of flat design? I will answer you in a nutshell: it really works! In this article, I will…

...

Web design basics. Analysis of the main blocks on the site
A true web design master 2.0 should be able to surprise people with innovative thinking and a creative approach to solving tasks. However, this does not mean that you need…

...