css渲染完成ajax才加载,css3 ajax加载进度线

最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了

button

body{

width: 500px

}

#string {

width: 0%;

height: 2px;

width: 100%;

margin:;

background-color: #1592ef;

}

@keyframes loading {

0% {

width: 0%;

}

10% {

width: 90%;

}

100%{

width: 100%;

}

}

@keyframes finish{

from{

width: auto;

}

to {

width: 100%;

}

}

function start() {

var aj = new XMLHttpRequest();

aj.open("get", './my.php');

var obj = document.getElementById('string');

obj.style.animation= 'loading 10s';

aj.onreadystatechange = function() {

if (aj.readyState == 4 ) {

obj.style.animation = 'finish 0.5s';

if( aj.status == 200){

console.log(aj.responseText);

}

}

}

aj.send();

}

【Demo】CSS3 动画 加载进度条

实例结果图: 完整代码:

...

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

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

30款基于 jQuery & CSS3 的加载动画和进度条插件

我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

ajax页面加载进度条插件

下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

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

在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

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

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

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

最终效果图: html结构:

    

            &lt ...

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

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

随机推荐

Nginx基础知识————生成自签名ca 证书 使nginx 支持https

创建服务器私钥,命令会让你输入一个口令: $ openssl genrsa -des3 -out server.key 1024 创建签名请求的证书(CSR): $ openssl req -new ...

dateset是不是在缓存中

C#开发erp系统的时候有一个多表数据的查询展示到页面,采用了存储过程的方式,但是存储过程中没有加入分页(菜比).刚开始测试数据几百条没有问题,当数据量提升至十万级后页面加载速度就很卡了,一般是使用分 ...

codeforces 395B2 	 iwiwi

#include #include using namespace std; ]="iiiiiiiiiiiiiiiiiiiiii&q ...

使用飞信api接口实现短信发送(只能发送好友)

找了很久才找到一个能用的飞信API接口(http://quanapi.sinaapp.com/fetion.php?u=飞信登录手机号&p=飞信登录密码&to=接收飞信的手机号&amp ...

Servlet处理Json请求数据包

request.setCharacterEncoding('UTF-8'); response.setContentType('text/html;charset=UTF-8'); String ac ...

Django：同一个app支持多个数据库

我以我个人的Mynote工程说明,目的是要在backend这个app里面设置不同的model对应daysn和bear两个数据库进行操作 现在我们先简单对一个完全新建的django工程配置一个自动在my ...

Saiku多用户使用时数据同步刷新(十七)

Saiku多用户使用时数据同步刷新 这里我们需要了解一下关于saiku的刷新主要有两种数据需要刷新: >1 刷新数据库的表中的数据,得到最新的表数据进行展示. >2 刷新cube信息,得到 ...

AspectJ开发

aspectJ 是基于java语言的aop框架,提供了强大的aop功能. aspectJ的实现主要有两种,一种是基于xml的声明式aspectJ,另一种是基于注解的aspectJ. 1.基于xml的声 ...

lua -- 在弹框中显示物品列表

-- 宝箱打开后,显示里面的物品列表 -- 显示方式是:一个一个显示,每三个一行,一行显示完就移动到下一行, -- 接下来的一样要显示框的中间位置,方便玩家看 function UIBagContro ...

2018.10.24 bzoj3195: [Jxoi2012]奇怪的道路(状压dp)

传送门 f[i][j][k]f[i][j][k]f[i][j][k]表示前iii个点连了jjj条边,第i−K+1i-K+1i−K+1~iii个点连边数的奇偶性为kkk时的方案数. 转移规定只能从后向前 ...