<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<title>CSS3激光加载条</title>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
/*简单清除浏览器样式*/
*{
margin:0px;
padding:0px;
}
/*设置进度条高度、背景色*/
#process{
height: 2px;
background: #1abc9c;
transform:opacity 300ms linear;
-webkit-animation:myProcess 3s;/*动画绑定*/
animation:myProcess 3s;
}
/*采用CSS3创动画规则*/
@-webkit-keyframes myProcess{
0%{width: 0px;}
100%{width:100%;}
}
@keyframes myProcess{
0%{width: 0px;}
100%{width:100%;}
}
.over{
opacity: 0;
}
/**
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性
资料来源：http://www.w3cschool.cc/
**/
</style>
<script type='text/javascript'>
$({ timer: 0 }).animate({timer: 100}, //从0-100
{
duration: 3000,//速度设定，
//三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
step: function() {//阶梯函数
var percentage = Math.round(this.timer); //对timer每一刻的值进行取整操做
$('#process').css('width', percentage + "%");
if (percentage == 100) {
$("#process").addClass("over"); //当加载完毕时，隐藏Process
}
}
});
</script>
</head>
<body>
<div id="process"> </div>
</body>
</html>

html5做的一个激光条的更多相关文章

  1. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  2. 前端观察：HTML5做得好，收入不比 iOS 差

    谷歌奋进的绿色机器人超过了苹果的市场占有率,这一市场现象,导致了愈来愈多的开发者转投html5的怀抱.而HTML5将成为开发者拥抱同时拥抱Android和IOS的不二法门. 根据著名移动生态系统分析公 ...

  3. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  4. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  5. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  6. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  7. 这几天有django和python做了一个多用户博客系统（可选择模板）

    这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...

  8. 做了一个动态代理IP池项目，邀请大家免费测试~

    现在出来创业了,目前公司在深圳. 做了啥呢, 做了一个动态代理 IP 池项目 现在邀请大家免费测试体验! 免费激活码:关注微信公众号:2808proxy (每人每天限领一次噢~) 网站:https:/ ...

  9. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. block教程

    http://pernghh.pixnet.net/blog/trackback/eac87d412e/33563409 本文来自台湾的某开发人员的博客,被墙,感觉讲的比较易懂,所以引过来.文字简体化 ...

  2. cc.Node—场景树

    对于cc.Node我分了四个模块学习: 1.场景树,2.事件响应,3.坐标系统,4.Action的使用:在此记录经验分享给大家. 场景树 1: creator是由一个一个的游戏场景组成,通过代码逻辑来 ...

  3. 1043 输出PATest （20 分）

    题目链接:1043 输出PATest (20 分) 这道题目很简单,遍历整个字符串,统计相应字符的个数,然后按照题目要求进行输出即可. #include <bits/stdc++.h> u ...

  4. 洛谷 P1280 尼克的任务 (线性DP)

    题意概括 线性资源分配的问题,因为空闲的时间大小看后面的时间(反正感觉这个就是个套路)所以从后往前DP. 转移方程 如果当前时刻没有工作 f[i]=f[i+1]+1 如果当前时刻有工作 f[i]=ma ...

  5. Linux 下 Bash 脚本对拍

    背会... #!/bin/bash i= while true ;do ./maker > data.in ./a <data.in> data.out ./b <data.i ...

  6. jupyter notebook的插件安装及文本格式修改

    jupyter notebook的插件安装及文本格式修改 1.jupyter notebook拓展插件安装 启动jupyter notebook : 打开控制台输入命令 jupyter noteboo ...

  7. 腾讯云，搭建Http静态服务器环境

    任务时间:15min ~ 30min 搭建静态网站,首先需要部署环境.下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务. 安装 Nginx 在 CentOS 上,可直接使 ...

  8. codeforces 372 Complete the Word(双指针)

    codeforces 372 Complete the Word(双指针) 题链 题意:给出一个字符串,其中'?'代表这个字符是可变的,要求一个连续的26位长的串,其中每个字母都只出现一次 #incl ...

  9. Spring Tool Suite 安装

    第一步:到http://spring.io/tools/sts/all/上下载对应版本.(此处以博主Windows64位系统为例) 第二步: 进入eclipse,依次点击help-->Insta ...

  10. MySQL的Date()函数拼接

    SELECT date_format(DATE(a.date_created),'%Y-%c-%d') As dateCreate, SUM(a.sm) As sumAmount, sum(order ...