推荐开源项目：jQuery.mLoading - 简约而强大的页面加载指示器

jQuery.mLoading 是一个轻量级的 jQuery 插件，用于创建自定义的页面加载指示器。以下是如何使用 jQuery.mLoading 的示例代码：

1. 首先，确保在 HTML 中包含 jQuery 库和 mLoading 插件的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="path/to/jquery.mloading.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.mloading.min.js"></script>

2. 接下来，在页面加载时启动加载指示器，并在数据加载完成后将其关闭：

$(document).ready(function() {
    // 显示加载指示器
    $.mLoading('show');
 
    // 模拟数据加载，实际应用中，这里会是异步数据加载的代码
    setTimeout(function() {
        // 数据加载完成后，关闭加载指示器
        $.mLoading('hide');
    }, 3000); // 假设数据加载需要3秒钟
});

3. 如果你想要自定义加载指示器的样式或文本，可以在调用 $.mLoading('show') 之前设置相应的选项：

$.mLoading({
    text: '加载中...', // 加载文本
    styles: {
        'background-color': '#007bff', // 自定义背景颜色
        'color': '#ffffff' // 自定义文本颜色
    }
});
 
// 显示加载指示器
$.mLoading('show');

jQuery.mLoading 提供了简单而强大的方式来为你的网页添加自定义的加载指示器，并且易于集成到现有的项目中。