(function(){
try{
var ui={
loading:{
addCssStyle:function(text) {
var head = document.getElementsByTagName('head')[0];
var node = document.createElement('style');
node.type = 'text/css';
head.appendChild(node);
node.innerHTML = text;
return node;
},
init:function(parent){
var html =' <div class="spinner">';
for(var i=0;i<12;i++){
html = html+ '<div class="bar'+(i+1)+'"></div>';
}
html = html+ '</div>';
if($(parent).find(".spinner").length == 0)
{
$(parent).append(html);
if($("#spinner").length == 0){
var css = ".spinner{width:30px;display:inline-block;position:relative}.spinner div{width:2px;height:4px;background-color:grey;position:absolute;opacity:0;-webkit-border-radius:60%;-webkit-animation:fade 1s linear infinite;top:-8px;left:10px}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}";
for(var i=0;i<12;i++){
css = css + ".spinner div.bar"+(i+1)+"{-webkit-transform:rotate("+i*30+"deg) translate(0,-142%);-webkit-animation-delay:"+((0.0837*i-1))+"s}";
}
console.log(css);
this.addCssStyle(css);
}
}
},
show:function(parent){
this.init(parent);
$(parent).find(".spinner").show();
},
hide:function(parent){
$(parent).find(".spinner").hide();
}
}
};
window.Rui = ui;
}catch(e){
console.log(e);
}
})();

loading加载中效果的更多相关文章

  1. WPF防止界面卡死并显示加载中效果

    原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...

  2. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

    在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...

  3. 用Loading 加载中的整页加载来做蒙层

    总结:遇见的bug 如何写一个蒙层 最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖 除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...

  4. CSS动画实例:Loading加载动画效果(一)

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  5. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  6. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  7. layui的loading加载中

    var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. Android 三种方式实现自定义圆形页面加载中效果的进度条

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...

随机推荐

  1. VC++2005、VC2008中Release版本设置为可调试的设置方法

    一.很多时候需要在Release版本下调试程序,可以使用以下方法设置: 1.无效断点所在的项目和启动项目的设置:项目->属性->配置属性->C/C++->常规->调试信息 ...

  2. mfc控件与其对应的对象的关联方法

    对话框的控件与其对应类的对象相关联:(两种方法) (1)      通过CWnd::DoDataExchange函数进行关联: 用VC++6.0的MFC ClassWizard中的Member Var ...

  3. MMA7455加速度传感器測量角度

    使用加速度传感器应该注意几点: 第一:确保你的IIC是正确的: 第二,首先必须校准系统,校准方法,例如以下:将7455平放,保证z轴向下,这是假设系统是Ok的,那么x轴输出为0,y轴输出为0,z轴输出 ...

  4. Delphi中获取某类的祖先类及其所在单元名称(使用GetTypeData(PClass.ClassInfo)函数,并且该类是从TPersistent类的派生类才可以这么使用)

    前几天在CSDN社区看到一篇<如何得到自身单元名称>的帖子,其中一位名为sdzeng网友给出了答案.受此启发,自己写了一个函数,用来获取指定类的所有祖先类的名称及其所在的单元名称. //参 ...

  5. H-index因素

    Problem Description Paper quality and quantity have long been used to measure a research's scientifi ...

  6. Swift - 使用UIWebView和UIToolbar制作一个浏览器

    使用网页控件(UIWebView)与工具栏控件(UIToolbar),我们可以自制一个小型的浏览器,其功能如下: 1,输入网址,点击“Go”按钮加载网页 2,加载过程中有进度条,同时可以点击停止按钮取 ...

  7. PHP中抽象类与接口的应用场景

    <?php /*** ====笔记部分==== 接口的具体语法: 0:以人类为, class Human 是人的草图 而接口 是零件 可以用多种零件组合出一种新特种来. 1: 如上,接口本身即是 ...

  8. A*寻路算法的实现

    原理:http://www.cppblog.com/christanxw/archive/2006/04/07/5126.html 算法理论请到原理这个传送门,代码中的注释,已经比较详细,所以我不会讲 ...

  9. JS跑马灯

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  10. ThinkPHP页面跳转、Ajax技巧详细介绍(十八)

    原文:ThinkPHP页面跳转.Ajax技巧详细介绍(十八) ThinkPHP页面跳转.Ajax技巧详细介绍 一.页面跳转 $this->success('查询成功',U('User/test' ...