Angular: Create Custom Dynamic Loader OR Spinner on HTML Element
Tags: angular, typescript, html, javascript
Published: 2020-02-21 10:30:13

<!-- wp:paragraph -->
<p>In this article, we’ll learn how we can show loader or spinner on a specific element of an HTML form using <a rel="noreferrer noopener" aria-label="Angular 8 (opens in a new tab)" href="https://angular.io/" target="_blank">Angular 8</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Prerequisites:</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Prior knowledge of <a href="https://www.typescriptlang.org/docs/home.html" target="_blank" rel="noreferrer noopener" aria-label="TypeScript (opens in a new tab)">TypeScript</a>.</li><li>Prior knowledge of <a rel="noreferrer noopener" aria-label="JavaScript (opens in a new tab)" href="https://www.w3schools.com/js/js_intro.asp" target="_blank">JavaScript</a>.</li><li>Visual studio code.</li><li>A development machine with Node 8.9+ &amp; NPM 5.5.1+ installed.</li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Step 1: Installing Angular CLI 8</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the First step, we’ll have to install the latest version of <a href="https://cli.angular.io/" target="_blank" rel="noreferrer noopener" aria-label="Angular CLI (opens in a new tab)">Angular CLI</a> using below command.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm install -g @angular/cli</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Step 2: Creating your Angular 8 Project</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this second step, we will use Angular CLI to start our Angular Project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to CMD or Terminal and use below command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ ng new custom-loader</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This CLI will ask you <em>“whether you would like to add Angular routing”</em>: <strong>Say Yes.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will ask <em>“which stylesheet format you would like to use”</em>. <strong>Choose CSS</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After that, open your project in Visual studio code and <strong>go to your root folder</strong> and run the local development server using below command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ npm start</code></pre>
<!-- /wp:code -->

<!-- wp:image {"id":5481} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/Angular-8-Project-Creation-Process-1024x363.png" alt="Angular 8 Project Creation Process" class="wp-image-5481"/><figcaption>Angular 8 Project Creation Process</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now run <strong>localhost:4200/</strong> in your browser.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Step 3: Add Custom JS and Image of loader</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Now add JS and image folder inside of assets folder of project.</li><li>Add JavaScript file inside JS folder with name <em>“custom.js”</em></li><li>Add any of your loader image inside image folder with name <em>“loader.gif”</em>.</li><li>Add <strong>jquery</strong> &amp; <strong>custom.js</strong> in <strong>angular.json</strong> folder of your project.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5483} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/Add-Custom-JS-and-Image-of-loader-Step.png" alt="Code Snippet of Add Custom JS and Image of loader Step" class="wp-image-5483"/><figcaption>Code Snippet of Add Custom JS and Image of loader Step</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After executing above steps, </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4><strong>Open your custom js file and copy this below code</strong></h4>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><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 = "&lt;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'>&lt;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'>&lt;/div>&lt;/div>";
    if (flag == true) {
        loadingContain = "&lt;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'>&lt;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'>&lt;/div>&lt;/div>"
    }
    $("body").append(loadingContain);
}
function loadingServiceHide(id) {
    if (id === "" || id === null || id === undefined) {
        $(".loader-image").remove();
    } else {
        $("#" + id + "_Loader").remove();
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Step 4: How to use Custom.js to make Call Custom Dynamic Loader</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Open <em><span style="text-decoration: underline;">app.component.html</span></em> page and add any HTML component like</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5485} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/Adding-HTML-component.png" alt="Adding HTML Component in app.component.html file" class="wp-image-5485"/><figcaption>Adding HTML Component</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"backgroundColor":"very-light-gray"} -->
<p class="has-background has-very-light-gray-background-color">Must add&nbsp;<strong>data attribute</strong> <strong><span style="text-decoration: underline;">data-loader="Unique Identity"</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, Open relevant <em>component.ts</em> file and declare JavaScript function above <em>@component</em></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5486,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/Declaring-JavaScript-Function.png" alt="Declaring JavaScript Function" class="wp-image-5486"/><figcaption>Declaring JavaScript Function</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Step 5: How to Start Loader on a specific Element</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For loading start, you have to add this line (For full-screen loader you just have to pass “true” in the last argument)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>For Specific element - </strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>loadingServiceShow(1, 'loginbtnadd', false);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>For Full screen - </strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>loadingServiceShow(1, 'loginbtnadd', true);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now let me show you how to use that function in <em><strong>ts code file</strong></em></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5487} -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/function-in-ts-code-file.png" alt="function implementation in ts code file" class="wp-image-5487"/><figcaption>ts code file</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Step 6: How to Stop loader from specific Element</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For stop you have to add this below line of command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>loadingServiceHide('loginbtnadd');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Output as Below</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://www.samarpaninfotech.com/wp-content/uploads/2019/12/Angular-8-Custom-Dynamic-Loader-on-HTML-elements.gif" alt="Angular Custom Dynamic Loader - Spinner on HTML elements"/><figcaption>Angular Custom Dynamic Loader/Spinner on HTML elements Demo</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4>Over to YOU!</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"backgroundColor":"very-light-gray"} -->
<p class="has-background has-very-light-gray-background-color"><em><strong>Looking for a Sample Source Code?</strong></em> Here you go: <a rel="noreferrer noopener" aria-label="GITHUB (opens in a new tab)" href="https://github.com/sandipmalaviya07/custom-loader-on-form-element/tree/master/custom-loader" target="_blank"><strong><em>GITHUB</em></strong></a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a rel="noreferrer noopener" aria-label="Angular Expert (opens in a new tab)" href="https://www.samarpaninfotech.com/hire-angularjs-developers/" target="_blank">Angular Expert</a> via GitHub Profile.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Related Resources:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" aria-label="Solution for Angular IE Error: Uncaught (in promise) Loading chunk (opens in a new tab)" href="https://dev.to/sandipmalaviya/angular-ie-error-uncaught-in-promise-loading-chunk-3pa" target="_blank">How to Load Dynamic HTML Div Content In Angular Tutorial with Source Code</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>That's it for now. Stay Connected for more tutorials, until than Happy Coding...</p>
<!-- /wp:paragraph -->