DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • Loader Animations Using Anime.js
  • SQL Loader + Unix Script: Loading Multiple Data Files in Oracle DB Table
  • Classloaders in JVM: An Overview

Trending

  • Code Reviews: Building an AI-Powered GitHub Integration
  • Apple and Anthropic Partner on AI-Powered Vibe-Coding Tool – Public Release TBD
  • Event-Driven Microservices: How Kafka and RabbitMQ Power Scalable Systems
  • Creating a Web Project: Caching for Performance Optimization
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Use a Start/Stop Loader on Every AJAX Call

How to Use a Start/Stop Loader on Every AJAX Call

Learn how to put an AJAX loader for all AJAX calls from all pages which extend from your layout page into your MVC structure.

By 
Faisal Pathan user avatar
Faisal Pathan
·
Feb. 05, 19 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
19.9K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

In this article, we’ll learn how to put an AJAX loader for all AJAX calls from all pages which extend from your layout page into our MVC structure. Here, we will create a simple MVC project and call AJAX functions from view. For beginners who are new to AJAX, AJAX is Asynchronous JavaScript and XML, it's a front-end web technology that calls web-servers asynchronously. It will load your content without loading or leaving your current page.

Recommended Prerequisites

  • Visual Studio 
  • ASP.NET MVC

Step 1

Open Visual Studio and select “File” >> "New". Then, click on Project.

Step 2

Select “Templates” >> Visual C# >> Web then ASP.NET Web Application (.NET Framework), and put appropriate project name.

  • And click the “OK” button.

Step 3

And, from here select MVC project (you can select the project as per your requirement).

Step 4

Now, go to your layout page and put in the below code as per the instructions.

Loader CSS

<style>  
        /*!  
        // 3. Loader  
        // --------------------------------------------------*/  
        .loader {  
            top: 0;  
            left: 0;  
            position: fixed;  
            opacity: 0.8;  
            z-index: 10000000;  
            background: Black;  
            height: 100%;  
            width: 100%;  
            margin: auto;  
        }  
  
        .strip-holder {  
            top: 50%;  
            -webkit-transform: translateY(-50%);  
            -ms-transform: translateY(-50%);  
            transform: translateY(-50%);  
            left: 50%;  
            margin-left: -50px;  
            position: relative;  
        }  
  
        .strip-1,  
        .strip-2,  
        .strip-3 {  
            width: 20px;  
            height: 20px;  
            background: #0072bc;  
            position: relative;  
            -webkit-animation: stripMove 2s ease infinite alternate;  
            animation: stripMove 2s ease infinite alternate;  
            -moz-animation: stripMove 2s ease infinite alternate;  
        }  
  
        .strip-2 {  
            -webkit-animation-duration: 2.1s;  
            animation-duration: 2.1s;  
            background-color: #23a8ff;  
        }  
  
        .strip-3 {  
            -webkit-animation-duration: 2.2s;  
            animation-duration: 2.2s;  
            background-color: #89d1ff;  
        }  
  
        @@-webkit-keyframes stripMove {  
            0% {  
                transform: translate3d(0px, 0px, 0px);  
                -webkit-transform: translate3d(0px, 0px, 0px);  
                -moz-transform: translate3d(0px, 0px, 0px);  
            }  
  
            50% {  
                transform: translate3d(0px, 0px, 0px);  
                -webkit-transform: translate3d(0px, 0px, 0px);  
                -moz-transform: translate3d(0px, 0px, 0px);  
                transform: scale(4, 1);  
                -webkit-transform: scale(4, 1);  
                -moz-transform: scale(4, 1);  
            }  
  
            100% {  
                transform: translate3d(-50px, 0px, 0px);  
                -webkit-transform: translate3d(-50px, 0px, 0px);  
                -moz-transform: translate3d(-50px, 0px, 0px);  
            }  
        }  
  
        @@-moz-keyframes stripMove {  
            0% {  
                transform: translate3d(-50px, 0px, 0px);  
                -webkit-transform: translate3d(-50px, 0px, 0px);  
                -moz-transform: translate3d(-50px, 0px, 0px);  
            }  
  
            50% {  
                transform: translate3d(0px, 0px, 0px);  
                -webkit-transform: translate3d(0px, 0px, 0px);  
                -moz-transform: translate3d(0px, 0px, 0px);  
                transform: scale(4, 1);  
                -webkit-transform: scale(4, 1);  
                -moz-transform: scale(4, 1);  
            }  
  
            100% {  
                transform: translate3d(50px, 0px, 0px);  
                -webkit-transform: translate3d(50px, 0px, 0px);  
                -moz-transform: translate3d(50px, 0px, 0px);  
            }  
        }  
  
        @@keyframes stripMove {  
            0% {  
                transform: translate3d(-50px, 0px, 0px);  
                -webkit-transform: translate3d(-50px, 0px, 0px);  
                -moz-transform: translate3d(-50px, 0px, 0px);  
            }  
  
            50% {  
                transform: translate3d(0px, 0px, 0px);  
                -webkit-transform: translate3d(0px, 0px, 0px);  
                -moz-transform: translate3d(0px, 0px, 0px);  
                transform: scale(4, 1);  
                -webkit-transform: scale(4, 1);  
                -moz-transform: scale(4, 1);  
            }  
  
            100% {  
                transform: translate3d(50px, 0px, 0px);  
                -webkit-transform: translate3d(50px, 0px, 0px);  
                -moz-transform: translate3d(50px, 0px, 0px);  
            }  
        }  
    </style>  

Loader Div 

<div class="loader" id="AjaxLoader" style="display:none;">  
       <div class="strip-holder">  
           <div class="strip-1"></div>  
           <div class="strip-2"></div>  
           <div class="strip-3"></div>  
       </div>  
   </div>  

Loader Script  

<script>  
    $(document)  
        .ajaxStart(function () {  
            $('#AjaxLoader').show();  
        })  
        .ajaxStop(function () {  
            $('#AjaxLoader').hide();  
        });  
</script>  

The above script will call on every AJAX call, so we don't need a call loader function for each AJAX call. 

Step 5

Now, we are going to create an AJAX function and sleep system for a few seconds so we can see the loader.

In the Home Controller, create a new Action (put the below code).

 

public JsonResult CallingAjaxFunction()  
       {  
           System.Threading.Thread.Sleep(7000);  
           return Json(true,JsonRequestBehavior.AllowGet);  
       } 

On the Index page, we are going to call this method.  

Index.cshtml  

@{  
    ViewBag.Title = "Home Page";  
}  
  
<div class="jumbotron">  
    <h1>ASP.NET</h1>  
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>  
    <p><a class="btn btn-primary btn-lg" id="ajaxCall" onclick="CallMe()">Call Me »</a></p>  
</div>  
  
<div class="row">  
    <div class="col-md-4">  
        <h2>Getting started</h2>  
        <p>  
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that  
            enables a clean separation of concerns and gives you full control over markup  
            for enjoyable, agile development.  
        </p>  
        <p><a href="https://asp.net" class="btn btn-default">Learn more »</a></p>  
    </div>  
    <div class="col-md-4">  
        <h2>Get more libraries</h2>  
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>  
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>  
    </div>  
    <div class="col-md-4">  
        <h2>Web Hosting</h2>  
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>  
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>  
    </div>  
</div>  
<script>  
    function CallMe() {  
        $.ajax({  
            type: "GET",  
            url: '@Url.Action("CallingAjaxFunction", "Home")',  
            contentType: "application/json; charset=utf-8",  
            dataType: "json",  
            success: function (recData) { alert('Success'); },  
            error: function () { alert('A error'); }  
        });  
    }  
</script>  

HomeController.cs  

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace AjaxDemo.Controllers  
{  
    public class HomeController : Controller  
    {  
        public ActionResult Index()  
        {  
            return View();  
        }  
  
        public ActionResult About()  
        {  
            ViewBag.Message = "Your application description page.";  
  
            return View();  
        }  
  
        public ActionResult Contact()  
        {  
            ViewBag.Message = "Your contact page.";  
  
            return View();  
        }  
  
        public JsonResult CallingAjaxFunction()  
        {  
            System.Threading.Thread.Sleep(7000);  
            return Json(true,JsonRequestBehavior.AllowGet);  
        }  
  
    }  
}  

And that's all. Now, whenever you call any AJAX function from any page, the loader will show while loading/executing your content and hide when it's done/complete. 

Output 

 You can download this demo from here.

AJAX Loader (equipment)

Opinions expressed by DZone contributors are their own.

Related

  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • Loader Animations Using Anime.js
  • SQL Loader + Unix Script: Loading Multiple Data Files in Oracle DB Table
  • Classloaders in JVM: An Overview

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!