[前端资源]基于jquery和css实现的简单五种Loading样式
在日常前端开发中,我们都会用到 loading 加载这个效果,所以今天的前端资源就为大家推荐一款 loading 插件,这个插件主要使用 css 以及 jquery 实现的 loading 加载,支持五种常用的加载动效,简单易用可扩展,适合我们在日常项目中使用。
HTML 代码:
<div class="btn-show show-load1">Type 1</div> <div class="btn-show show-load2">Type 2</div> <div class="btn-show show-load3">Type 3</div> <div class="btn-show show-load4">Type 4</div> <div class="btn-show show-load5">Type 5</div> <div class="btn-show hide-show">Hide Load</div>
CSS 代码:
<!-- 样式 --> <link rel="stylesheet" href="./css/loading.css">
JS 代码:
/** * 参数:支持字符串以及对象传参 * 传值为字符串 默认第一种样式,提示文字为默认 loading... * 传值为对象时 * 1.type 类型,只支持五种,可扩展 必填项 * 2.tip 提示文字 非必填 * 3.showTip 是否显示提示文字,默认为 true 非必填 * 使用方法 * loading.showLoading() * loading.hideLoading() */ $('.show-load1').click(()=>{ loading.showLoading({ type:1, tip:"type 1" }) }) $('.show-load2').click(()=>{ loading.showLoading({ type:2, tip:"type 2" }) }) $('.show-load3').click(()=>{ loading.showLoading({ type:3, tip:"type 3" }) }) $('.show-load4').click(()=>{ loading.showLoading({ type:4, tip:"type 4" }) }) $('.show-load5').click(()=>{ loading.showLoading({ type:5, tip:"type 5" }) }) $('.hide-show').click(()=>{ loading.hideLoading(); })
以上就是前端资源为大家提供的基于 jquery 和 css 的简单五种 Loading 样式,易用,可扩展,欢迎下载!
下载方式:百度网盘 提取码:25cm
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [前端资源]基于jquery和css实现的简单五种Loading样式
码云笔记 » [前端资源]基于jquery和css实现的简单五种Loading样式