Get started with jquery-easy-loading CDN

MIT licensed

JQuerys EasyLoading plugin: Displays custom loading animation during AJAX requests.

Tags:
  • jquery
  • jquery-plugin
  • ecosystem:jquery
  • overlay
  • loading
  • loader
  • ajax

Stable version

Copied!

How to start using jquery-easy-loading CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery-easy-loading CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery-easy-loading/1.3.0/jquery.loading.min.js"></script>
    <style>
        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="loading">
        <i class="fas fa-spinner fa-pulse fa-3x"></i>
    </div>

    <script>
        $(document).ready(function() {
            $('#loadData').click(function() {
                $('#loading').show();
                $.get('https://jsonplaceholder.typicode.com/todos', function(data) {
                    console.log(data);
                    $('#loading').hide();
                });
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions