实用的loading插件

所属分类:UI-加载

 71765  519  查看评论 (27)
分享到微信朋友圈
X
实用的loading插件 ie兼容10

loading

一个兼容移动端pc以及ie10以上的loading插件

direction

方向,column纵向 row 横向

animateIn

进入类型,这里不需要引用animatecss(因为个人觉得loading效果不需要太花哨,默认fadeInNoTransform,其他设置都不会有动画效果)

title

loading的title名称 为'' 则不显示

titleColor

title的文字颜色

name

loading的name名称 这算是唯一标识,重复的name的loading不会再生成,因此每次需要给一个name属性

type

loading显示的样式   是转动的小圆球 origin 还是图片 pic

discription

loading的描述  为'' 则不显示

discColor

loading的描述颜色

loadingWidth

默认260 loading的宽度

loadingBg

默认 'rgba(0, 0, 0, 0.6)' loading的背景色

borderRadius

默认12 loading的圆角

loadingMaskBg

默认 transparent loading的遮罩层背景色

zIndex

默认 1000001 loading的层级

圆形旋转的loading样式  (origin)

originDivWidth

默认 60 loading内部圆球区域的宽度

originDivHeight

默认 60 loading内部圆球区域的高度

originWidth

默认 8 小圆球的宽度

originHeight

默认 8 小圆球的高度

originBg

默认'#fefefe' 小圆球的背景色

smallLoading

默认 false 是否显示更小一点的旋转小球效果

这是图片的样式   (pic)

imgSrc

默认的图片地址

imgDivWidth

默认 80 图片的宽度

imgDivHeight

默认 80 图片的高度

flexCenter

默认false, 是否用flex布局让loading-div垂直水平居中

flexDirection

默认'row' row column flex的方向 横向 和 纵向

mustRelative

默认false 调用loading的元素是否规定relative

相关插件-加载

js图片懒加载插件jxLazyload

最简便的jquery图片懒加载插件jxLazyload
  加载
 29654  189

js环形进度条

js环形进度条,再也不怕js了
  加载
 66100  531

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 41690  381

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 66256  406

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    口口口 0
    2021/1/29 12:38:58
    loading中间圆圈不显示,显示加载更多,是为什么 回复
    Sun,幸福 0
    2020/8/14 15:07:39
    这个插件在页面滚动到下方的时候,加载不会检测到滚动距离,还是显示在html上面第一屏的位置,该怎么处理呢?
        Sun,幸福1
        2020/8/14 15:25:28

        已经解决,在loading.js的72行添加:

        // 让悬浮层的top值,设置为页面滚走的上部
        'top': $(window).scrollTop() + 'px',

        设置.cpt-loading-mask 的top值!

    回复
    L .peng 0
    2020/4/16 20:49:35
    触发插件后我的代码不继续运行了 是什么原因 回复
    rrblt 0
    2019/5/6 14:21:34
    怎么隐藏呢
        Sun,幸福1
        2020/8/14 15:05:46
        removeLoading('test');方法可以隐藏,‘test’是指在初始化加载页面时的name参数。
    回复
    张萌 0
    2019/4/15 17:34:32
    引入CSS影响了我原来的CSS,这个该怎么修改? 回复
    ? 忧伤说笑 0
    2018/12/18 20:52:38
    有修改描述信息的字体大小的属性的吗? 回复
    周经纬 0
    2018/10/24 17:02:13
    只能在火狐使用,其他浏览器都没效果 回复
    AIST 0
    2018/9/27 10:19:16
    经过本人验证,确实只能在火狐浏览器中使用,在google和ie中都是调试状态打断点就可以看见,不打断点就看不见效果,很奇怪。在火狐中就没这个问题,很流畅。
        AIST0
        2018/9/27 11:43:45
        可以用,是我的代码出bug了。。。。
    回复
    散落&&尘埃 0
    2018/8/29 10:37:05
    如何初始化和结束都不说下吗 回复
    ? 0
    2018/3/13 16:05:16
    能设置消失时间吗
        未曾遗忘的青春1
        2018/3/13 16:13:23
        你可以自己在组件里加一个方法,用settimeout就可以了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复