一:图标型加载指示器
这种指示器作为一个图标内嵌到页面中,用于显示耗时到加载操作。
<!-- 默认加载器 --> <span class="preloader"></span> <!-- 白色加载器,另加"preloader-white"类 --> <span class="preloader preloader-white"></span> <!-- 自定义尺寸的默认加载器 --> <span style="width:42px; height:42px" class="preloader"></span> <!-- 自定义尺寸的白色加载器 --> <span style="width:42px; height:42px" class="preloader preloader-white"></span>
二:弹窗型加载指示器
1:预加载弹窗
$$(‘preloader‘).on(‘click‘, function () { myApp.showPreloader(‘预加载标题‘)//显示预加载弹窗 setTimeout(function () { myApp.hidePreloader(); }, 延时);//延时关闭预加载弹窗 });
2:指示器弹窗
$$(‘.indicator‘).on(‘click‘, function () { myApp.showIndicator();//显示指示器 setTimeout(function () { myApp.hideIndicator(); }, 延时);//隐藏指示器 });
预加载与指示器的区别:
预加载由“标题+指示器”组成,标题作为提示信息。
指示器则只有一个加载动画,没有文字提示。