css线加点的进度,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 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

随机推荐

eclipse 查看变量或方法在什么地方被调用的快捷键

选中方法名,点鼠标右键,菜单里有个”打开调用层次结构 ( Open Call Hierarchy )“,选中或者按下快捷键Ctrl+Alt+H,就在下面栏目里能看到调用的树形结构了. 或者: 1.双击 ...

Aufs与Devicemapper的关系

Aufs与Devicemapper的应用 Aufs是Docker最初采用的文件系统,由于Aufs未能加入到Linux内核,考虑到兼容性问题,加入了Devicemapper的支持.目前,除少数版本如Ub ...

曲线行驶s弯道技巧图解【转】

s弯道怎么走?在走S弯的时候,最主要的就是控制车的速度,在做每个动作的时候要保持一样的速度,不要一会快一会慢的,在开的时候,因为每个人的身高,体型不一样,每个人看的点位都是不一样的,每次在开的时候要找 ...

Linux基础※※※※访问Windows共享文件夹

参考Linux公社链接:http://www.linuxidc.com/Linux/2014-06/103749.htm 实际上,可以直接用sambaclient程序访问共享资源. 列出共享主机的列表 ...

jQuery插件综合应用(四)头像设置

一.操作流程 会员点击头像设置,弹出一个层,在层中,有上传图片的按钮,用户点击按钮上传图片,图片在服务器端按大小压缩保存(方便剪切).保存后,在前端显示,然后用户可修剪图片.选择图片区域,点击提交,保 ...

shell脚本采用crontab定时备份数据库日志

测试服务器上才用定时脚本备份一个数据库 并打包压缩成tar避免文件过大 脚本如下: 测试服务器的shell backup_mysql.sh #!/bin/bash BASE_PATH=/alidata ...

Color the Fence

Codeforces Round #202 (Div. 2) B:http://codeforces.com/problemset/problem/349/B 题意:给你一些颜料,然后你可以用这些颜料 ...

js日期天数差

var s1 = "2007-01-01"; var s2 = "2007-12-31"; s1 = s1.replace(/-/g, "/&quot ...

bootstrap tabs 默认tab页的使用方式

HTML中引入tabs如下: