Angular: Create Custom Dynamic Loader on HTML Element

In this article, we’ll learn how we can show loader or spinner on a specific element of an HTML form using Angular 8.

It will also help you to understand angular development queries like

• How to add custom loader in angular?,
• How to add spinner on a specific form element?,
• How to add loader on a button?,
• How to add spinner on a drop-down?,
• How to make loader in angular 8?,
• How to add spinner on specific div tag?.

Prerequisites:

1. Prior knowledge of TypeScript.
2. Prior knowledge of JavaScript.
3. Visual studio code.
4. A development machine with Node 8.9+ & NPM 5.5.1+ installed.

Step 1: Installing Angular CLI 8

In the First step, we’ll have to install the latest version of Angular CLI using below command.

$ npm install -g @angular/cli

Step 2: Creating your Angular 8 Project

In this second step, we will use Angular CLI to start our Angular Project.

Go to CMD or Terminal and use below command:

$ ng new custom-loader

This CLI will ask you “whether you would like to add Angular routing”: Say Yes.

It will ask “which stylesheet format you would like to use”. Choose CSS.

Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.

After that, open your project in Visual studio code and go to your root folder and run the local development server using below command:

$ npm start

Now run localhost:4200/ in your browser.

Step 3: Add Custom JS and Image of loader

• Now add JS and image folder inside of assets folder of project.
• Add JavaScript file inside JS folder with name “custom.js”
• Add any of your loader image inside image folder with name “loader.gif”.
• Add jquery & custom.js in angular.json folder of your project.

After executing above steps,

Open your custom js file and copy this below code

function loadingServiceShow(zindex, id, flag) {
    try {
        var _id = $("[data-loader=" + id + "]");
        _id.CenterLoader(zindex, id, flag);
    } catch (error) {
        loadingServiceHide(id);
    }
}
$.fn.CenterLoader = function (zindex, id, flag) {
    var height = $(this).outerHeight() + "px";
    var width = $(this).outerWidth() + "px";
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    var loadingContainer = "body";
    if (flag == true) {
        top = 0;
        left = 0;
        loadingContainer = this;
    }
    var centerTop = Math.max(0, (($(this).outerHeight() / 2) - 7)) + "px";
    var centerLeft = Math.max(0, (($(this).outerWidth() / 2) - 7)) + "px";

    var loadingContain;
    if (id === "" || id === null || id === undefined) {
        id = "loader-image";
    } else {
        var _loadIdAppend = id
        id = id + "_Loader";
    }
    loadingContain = "<div style='position:absolute;height:" + height + ";width:" + width + ";background:#ccc;z-index:" + zindex + ";top:" + top + "px;left:" + left + "px;opacity:0.7' id='" + id + "' class='loader-image'><div style='position:absolute;top:" + centerTop + ";left:" + centerLeft + ";color:white;height: 28px;width: 28px;background: transparent url(assets/image/loader.gif) no-repeat scroll 0 0;' class='loader-style'></div></div>";
    if (flag == true) {
        loadingContain = "<div style='position:fixed;height:100%;width:100%;background:#ccc;z-index:" + zindex + ";top:0;left:0;opacity:0.7;'id='" + id + "' class='loader-image'><div style='position:absolute;top:49%;left:49%;color:white;height: 28px;width: 28px;background: transparent url(assets/image/loader.gif) no-repeat scroll 0 0;'class='loader-style'></div></div>"
    }
    $("body").append(loadingContain);
}
function loadingServiceHide(id) {
    if (id === "" || id === null || id === undefined) {
        $(".loader-image").remove();
    } else {
        $("#" + id + "_Loader").remove();
    }
}

Step 4: How to use Custom.js to make Call Custom Dynamic Loader

Open app.component.html page and add any HTML component like

Must add data attribute data-loader=”Unique Identity”

Next, Open relevant component.ts file and declare JavaScript function above @component

Step 5: How to Start Loader on a specific Element

For loading start, you have to add this line (For full-screen loader you just have to pass “true” in the last argument)

For Specific element –

loadingServiceShow(1, 'loginbtnadd', false);

For Full screen –

loadingServiceShow(1, 'loginbtnadd', true);

Now let me show you how to use that function in ts code file

Step 6: How to Stop loader from specific Element

For stop you have to add this below line of command:

loadingServiceHide('loginbtnadd');

Over to YOU!

Looking for a Sample Source Code? Here you go: GITHUB.

Today you have learn how to create custom dynamic loader on HTML Element using Angular 8. If you have queries about tutorial, please ask our Angular Developers. That’s it for now. Stay Connected for more tutorials, until than Happy Coding…

Related Resources:

• How to Load Dynamic HTML Div Content In Angular Tutorial with Source Code
• Angular: Load Multiple Dynamic Component in Page
• Angular: Create Dynamic Form with Controls & Validation