可将Loading指示器相对于容器绝对居中的jQuery插件

Center-Loader是一款可以将Loading指示器相对于容器绝对居中的jQuery插件。该插件可以使用图片或font-awesome字体图标来作为Loading指示器，并且可以将指示器相对于某个容器或整个页面绝对居中。

使用方法

使用该插件需要引入jQuery和center-loader.js文件。

1 2	`<script` `src="dist/jquery.min.js"></script>` `<script` `src="dist/center-loader.js"></script>`

如果需要使用font-awesome字体图标，还要引入font-awesome字体图标的CSS文件。

1	`<link` `rel="stylesheet"` `href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">`

初始化插件

如果你使用font-awesome来作为Loading指示器，可以使用下面的方法来初始化该插件。

//显示Loading指示器

$(‘#container‘).loader(‘show‘,‘<i class="fa fa-cog fa-spin"></i>‘);

//隐藏Laoding指示器

$(‘#container‘).loader(‘hide‘);

你也可以使用一张GIF图片来作为Laoding指示器：

//显示Loading指示器

$(‘#container‘).loader(‘show‘,‘<img src="img/loader.gif">‘);

//隐藏Laoding指示器

$(‘#container‘).loader(‘hide‘);

更多例子请查看Demo中的演示。

时间： 2024-12-29 23:29:18

可将Loading指示器相对于容器绝对居中的jQuery插件的相关文章

Html5添加小巧的自定义页面加载loading指示器插件教程

一.使用方法 <script src="js/jquery-2.1.4.min.js"></script> <script src="dist/jquery.showLoading.min.js"></script> 二.CSS .loading-indicator { height: 80px; width: 80px; background: url('loading.gif') no-repeat center

带loading指示器的js提交按钮动画特效

Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件.该js按钮特效用于制作提交按钮,在点击按钮后,按钮上会出现无限循环的Loading指示器和加载进度条效果.这种设计大大增强了用户的体验性. 该js按钮特效插件在Chrome和Firefox上进行了测试.它可以很好的工作在当前最新版本的Chrome, Firefox, Safari和IE9+浏览器上在线演示:http://www.htmleaf.com/Demo/201503101495.html 下载地址:http://w

图片在容器充满居中显示

效果图: 源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片在容器充满居中显示</title> <style type="text/css"> .container{ width: 100

iOS 自定义Loading指示器

gitHub: https://github.com/tomatoK/TKLoadView

ajax加载菊花loading效果

Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS样式,就可以创建一个Ajax Loading指示器. Spin.js的在线设计.演示及下载地址为:http://fgnass.github.io/spin.js/ 我们可以在链接页面中,动态设置样式,就会自动生成样式的配置脚本: 设置之后,下图就是我们需要配置的样式: 一.显示菊花loading <

为大家分享一个 Ajax Loading —— spin.js（转）

原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外部的CSS样式,就可以创建一个Ajax Loading 指示器,且兼容以下浏览器: Spin.js 的在线设计.演示及下载地址为:http://fgnass.github.io/s

Java并发(五):并发,迭代器和容器

在随后的博文中我会继续分析并发包源码,在这里,得分别谈谈容器类和迭代器及其源码,虽然很突兀,但我认为这对于学习Java并发很重要; ConcurrentModificationException: JavaAPI中的解释:当不允许这样的修改时,可以通过检测到对象的并发修改的方法来抛出此异常.一个线程通常不允许修改集合,而另一个线程正在遍历它. 一般来说,在这种情况下,迭代的结果是未定义的. 某些迭代器实现(包括由JRE提供的所有通用集合实现的实现)可能会选择在检测到此行为时抛出此异常. 这样做的

width:100%与绝对定位同时存在，偏移出父级容器

当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外 html <div class="container"> <div class="content">好的</div> </div> css .container { positi

Kubernetes(k8s)容器运行时(CRI)

Kubernetes节点的底层由一个叫做"容器运行时"的软件进行支撑,它负责比如启停容器这样的事情.最广为人知的容器运行时当属Docker,但它不是唯一的.事实上,容器运行时这个领域发展迅速.为了使Kubernetes的扩展变得更容易,我们一直在打磨支持容器运行时的K8s插件API:容器运行时接口(Container Runtime Interface, CRI). CRI是什么? 每种容器运行时各有所长,许多用户都希望Kubernetes支持更多的运行时.在Kubernetes 1.