Open In App

jQuery Mobile Loader loading() Method

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will learn to use the jQuery Mobile Loader loading() Method. 

The jQuery Mobile Loader loading() Method is used to show or hide the loader message, which is configurable via $.mobile.loader prototype options as described in the widget docs or can be controlled via params object.

Syntax:

$( ".selector" ).loader( "loading" );
or
$.mobile.loader() //Global Method

Parameters: This method does not accept any arguments.

Return type: This method returns an object.

CDN Links: Add the below jQuery Mobile scripts that you will be needed for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: This example demonstrates the jQuery Mobile Loader loading() Method.

HTML




<!doctype html>
<html lang="en">
      
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
  </script>
    <script src=
  </script>
      
</head>
  
<body>
    <center>
        <div data-role="page" id="page1">
            <div>
                <h1 style="color:green;">GeeksforGeeks</h1>
                <h3>
                    jQuery Mobile Loader loading() Method
                </h3>
            </div>
            <div role="main" class="ui-content">
                <div data-role="controlgroup">
                    <button class="show" data-theme="b">
                      Default loader</button>
                    <button class="hide" >Hide</button>
                </div>
            </div>
            <b><span id="gfg"></span></b>
        </div>
    </center>
      
    <script>
        $(document).on( "click", ".show", function() {
            $.mobile.loading( 'show');
              
        })
        .on( "click", ".hide", function() {
          $.mobile.loading( "hide" );
        });
    </script>
</body>
</html>


Output:

jQuery Mobile Loader loading() Method

jQuery Mobile Loader loading() Method

Reference: https://api.jquerymobile.com/loader/#method-loading



Last Updated : 07 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads