div级别的loading插件

css3 之炫酷的loading效果

css3 之炫酷的loading效果今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: <div class="box"> <div class="master"> <div class="eyes"> <div class="eyes-ball"></div&

前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chengguanhui.com/demos/loading-js/ 1.简介 loading.js是本人近日开发的一款小插件,它主要是用于对图片进行预加载和展示多达28种的CSS3加载特效,非常小巧方便.这28个特效是网上收集回来的,为了在做小游戏或者写页面的时候使用更方便,我就把它做成了JS版本了.想要引入效

写一个Vue loading 插件

什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

JQuery+Bootstrap 自定义全屏Loading插件

/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上.Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Loading(config) { if (this instanc

js 控制Div循环显示非插件版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【自己开发】Jquery的loading插件

经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jquery-1.10.2.js,建议用高版本. <script src="jquery-1.10.2.js"></script> 然后引入样式和js文件,Loading.css和Loading.js <link rel="stylesheet"

#Plugin 环形loading插件

CircleLoader 环形loading插件 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 案例展示下载地址 https://github.com/chaorenzeng/CircleLoader/archive/master.zip 快速使用 1.引用 CircleLoader.js CircleLoader.css 2.参考以下HTML结构文档 <!DOCTYPE html> <html> <head> <meta

自定义vue的loading插件

在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中,如下图: 这种是我们比较常用的一种方法,它的好处就是让我们比较直观地对组件进行调用, 方便地通过标签上的属性动态地传给该组件,或者去获取子组件emit出来的事件.而我们也比较容易理解该组件在当前父组件中的运作情况. 如果该组件只是属于某个组件页面中的而已,这种方法确实可以省去编程中的一些不必要的耦合

基于weui loading插件封装

<template> <div id="loadingToast" v-if="show"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-loading weui-icon_toa

浏览Github必备的5款神器级别的Chrome插件

我们知道 Github 是程序员特有的宝藏,也可以称它为 GayHub, 大家浏览 Github 的时候,一定遇到过下面这些问题: 不克隆到本地的情况下阅读代码困难. 无法单独下载仓库中的某个文件/文件夹. 无法看到仓库大小以及每个文件的大小. ...... 有了今天推荐的这些插件之后,相信你就不会在逛 Github 的时候再遇到这些问题了. 另外,友情提示!无法访问 Google 的老哥们,推荐一种简单下载 Chrome 插件的方法:访问这个网站 https://crxdl.com/ 即可下载

vue axios拦截器 + 自编写插件实现全局 loading 效果；

项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面直接贴上代码~ 在公用模块定义loading文件,含 index.js,loading.vue文件,文件结构如下: 注:loading.vue 与 index.js 之间的传值通过props实现,代码如下: loading.vue <template> <div class="lo

插件-监控页面加载之loading

查看效果点https://icedjuice.github.io/plug-in/loading/loading.html 简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是通过模仿监控加载实现效果,简单易用且基本不消耗性能,十分方便. 1. html <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="

DVA框架统一处理所有页面的loading状态

dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件.通过这个插件,我们可以不必一遍遍地写 showLoading 和 hideLoading,当发起请求时,插件会自动设置数据里的 loading 状态为 true 或 false .然后我们在渲染 components 时绑定并根据这个数据进行渲染. dva-loading的使用非常简单,在index.js中加入: // 2. Plugins app.use(createLoading()); 每个

利用jQuery来扩展一个瀑布流插件

简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰的理解我将需求写成了注释扩展代码如下 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ (function($){ $.fn.WaterFall = function () { /* * 瀑布流插件 * 容器的宽度固定 * 子容器的宽度也固定 * 显示

基于Three.js的360X180度全景图预览插件

基于Three.js的360X180度全景图预览插件时间 2015-08-12 10:01:10 HTML5中国原文 http://www.html5cn.org/article-8621-1.html 主题 Three.js 简要教程 Photo Sphere Viewer是一款基于Three.js的360X180度全景图预览js插件.该js插件可以360度旋转查看全景图,也可以上下180度查看图片.使用该插件的唯一要求是浏览器支持canvas或WebGL. 查看演示下载插

如何自己编写一个easyui插件

本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能. 有利于我们理解easyui插件的实现,以及了解如何对easyui插件进行拓展,或者当发现bug时在不修改源码的情况下对bug进行修复. 1. 首先让我们来看看progressbar的源码(已经删除了一些对本文不重要的). 比较了一下有源码的那几个插件,发现这个只有3KB,最小,所以拿这个学习最好了:而且这个progressbar没有涉及继承其他控件,易

[Bootstrap]7天深入Bootstrap(5)JavaScript插件

在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab).提示框(Tooltip).弹出框(Popover).警告框(Alert).按钮(Button).折叠(Collapse).旋转轮播(Carousel).定位浮标(Affix). 由于各种加班,身心疲惫... 动画过渡源文件:transition.js 使用的动画过渡效果全部使用了 CSS3的语法

vue.js插件使用(01) vue-resource

本文的主要内容如下: 介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! GitHub Source 本文的所有示例如下: http get示例 http jsonp示例

vue-resource插件使用