五种常用的Loading动效

所属分类:其他-动画效果

 45775  315  查看评论 (16)
分享到微信朋友圈
X
五种常用的Loading动效 ie兼容12

这是一款主要使用css以及jquery实现的loading插件,支持五种常用的加载动效,简单易用可扩展

html:

<!-- 容器 -->
页面无需容器,直接js插入

css:

<!-- 样式 -->
<link rel="stylesheet" href="./css/loading.css">

js:

/**
    * 参数:支持字符串以及对象传参
    * 传值为字符串 默认第一种样式,提示文字为默认loading...
    * 传值为对象时
    * 1.type 类型,只支持五种,可扩展  必填项
    * 2.tip  提示文字  非必填
    * 3.showTip 是否显示提示文字,默认为true  非必填 
    * 使用方法
    * loading.showLoading()
    * loading.hideLoading()
    */
  loading.showLoading({
       type:1,
       tip:"type 1"
  })
loading.hideLoading();
相关插件-动画效果

jQuery+HTML5相应式文字粒子动画

jQuery+HTML5相应式文字粒子动画,使用canvas的。请在服务器环境下运行。
  动画效果
 49978  669

粒子动画插件particle.js

炫酷的粒子动画,代码注释全方便修改
  动画效果
 44184  351

可爱的3D角色动画

可爱的3D人物动画,视线跟随鼠标移动,可拖动旋转。
  动画效果
 27341  268

弹框消失效果

弹框消失的各种效果,应该会有你需要的。
  动画效果
 25893  318

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

    丨彡D/-丿 0
    2022/5/12 16:16:38
    丨彡D/-丿 0
    2022/5/12 16:16:20
    cl02050212 0
    2020/5/13 18:36:40
    function doit() {
        loading.showLoading({
            type: 1,
            tip: "type 1"
        });
        $(#'form1').submit();
    }

    在提交表单时调用loading.showLoading(),安卓的微信页面和pc页面都没问题,在ios的微信页面不生效是什么原因,把$(#'form1').submit();屏蔽,loading.showLoading()就能生效

    回复
    __Swimming__ 0
    2019/11/8 18:05:40
    好用吗?
        dujna0
        2020/8/15 16:47:42
        没什么问题
    回复
    流水 0
    2019/8/15 9:45:13
    感谢作者的奉献。
        奇龙网-宋炜明0
        2019/11/8 18:12:32
        有源码吗
    回复
    日字 1
    2019/7/9 14:36:11

    可以直接使用

    loading.showLoading({
        type: 1,
        tip: "填入你的title"
    })
    loading.hideLoading(); //关闭动画
        流水0
        2019/8/15 9:42:43
        赞++
    回复
    Oath 0
    2019/6/17 11:14:32
    这个放进网页是可以直接用的吧
        areyouOk0
        2019/6/17 11:20:32
        是的哦。
        xuehaoyu0
        2019/6/26 10:23:17
        我也告诉你 是的哦 哈哈
        不是山谷0
        2019/6/27 23:04:08
        是的吧
        5LqV5Y2O5oiR54ix5L2g0
        2019/7/10 10:45:24
        等观看路径以及调用函数
        流水0
        2019/8/15 9:39:52
        根据上面的提示去做即可。
        __Swimming__0
        2019/11/11 14:38:53

        可以直接使用

        loading.showLoading({
            type: 1,
            tip: "填入你的title"
        })
        loading.hideLoading(); //关闭动画
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复