使用dojo遮罩加载进度。

简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......");…

pace.js和NProgress.js两个加载进度插件的一点小总结

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NProgress.js NProgress是基于jquery的,且版本要 >1.8 API: NProgress.start() — 启动进度条 NProgress.set(0.4) — 将进度设置到具体的百分比位置 NProgress.inc() — 少量增加进度 NProgress.done() …

jQuery模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A70000;color:…

灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

DDProgressHUD的介绍提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多,加载网页时也可以用. 与用户弹窗交互的弹窗,告知用户当前操作的状态,成功还是失败,显示一张图片和文字.图片和文字也都可自定义可高度自定义的弹窗,将一个view显示在遮罩上面,相当于做了一个蒙版最后旋转的菊花,提供了一个view的扩展,将UIActivityIndicatorView小菊花显示在调…

react封装简单的浏览器顶部加载进度条全局组件

在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组件,实现简单的顶部加载进度条.效果如下组件放到components文件夹下,新建progress文件夹 progress/index.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types';…

《动手实现一个网页加载进度loading》

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进…

css3 linear-gradient实现页面加载进度条效果

最终效果图: html结构: <div> <p class="p1"> <span></span> </p> <p class="p2"> <span></span> </p> <p class="p3"> <span></span>…

炫！一组单元素实现的 CSS 加载进度提示效果

之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图…

ajax页面加载进度条插件

下面两个都是youtube视频的加载进度条效果的ajax插件一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rstacruz/nprogress/ 二.http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/…

XMLHttpRequest 加载进度

XMLHttpRequest 相关资料请移步这里直接查看,我这里就不在赘述: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest ------------------------------------------------本文开始------------------------------------------ 前端经常会使用js 来预加载图片,通常代码也如下 img=new Image(); if(img.com…

HTML5+javascript实现图片加载进度动画效果

在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // "; if (i == 0){ photo.style.display = "block"; loading.style.display = "none";//隐藏加载动画 } }; } // ]]> 代码如下: <!DOCTYPE html&g…

Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等. 您可能感兴趣的相关文章 Parallax.js – 自适应智能设备方向的视差效果插件 Glide.js:响应式 & 触摸友好的 jQuery 滑块插件 SlimerJS – Web开发人员可编写 JS 控制的浏览器 Chance – 功能强大的…

pace.js – 加载进度条插件

这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入…

prelaod场景，用来显示资源加载进度

phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas的元素,然后实例化一个 Game 对象就可以了. 复制代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>game</title> <…

仿UC浏览器图片加载进度条

前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如下: #import "FaceView.h" @implementation FaceView - (instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { sel…

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示推荐12个漂亮的 CSS3…

Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

一.概述本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 直接看下面的效果图吧. 二.效果图废话不说,先来看看效果图吧~~ 三.实现原理方案 1.自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容. 2.根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来…

Android ProgressDialog 加载进度

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Button a…

HTML5文件加载进度管理

/** * 文件加载进度管理 */ DownloadUtils = function(options){ options = options || {}; this.init(options); }; DownloadUtils.prototype = { init:function(options){ var _this = this; this.url = options.url; var xhr = new XMLHttpRequest(); xhr.open("get", th…

js页面加载进度条

<!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="X-UA-Com…

delphi之完美Splash方案（在TfrmMain.FormCreate里不断调用TfrmSplash显示加载进度文字，并且及时Update显示）

前言:网上有很多介绍delphi创建闪屏的代码,大多只是在程序开启前显示一个闪屏,但是却没有说如何在闪屏上显示程序加载的进度,于是笔者有意思介绍一下这种闪屏方式. 1.创建一个窗体(TfrmSplash),放入一个TImageBox,加载一幅图片,调整好TImageBox与图片的大小,然后在其上放入一个TLabel,name=LblStatus,用于显示加载进度文字.然后将TfrmSplash设置为不自动创建. 2.加入如下代码(代码很简单,就不用解释太多) unit UntFormSplash…

iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进行加载,KVO监听下载进度 // ViewController.m #import "ViewController.h" #import <WebKit/WebKit.h> #import <WebKit/WKWebView.h> #define SCREEN_WI…

网页加载进度的实现--JavaScript基础

总结了一些网页加载进度的实现方式…… 1.定时器实现加载进度 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器实现进度条</title> <style> *{margin:0;padding:0} .loading{width: 100%;height: 100%;position: fix…

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺…