<!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. [Python数据结构] 使用List实现Stack

    [Python数据结构] 使用List实现Stack 1. Stack 堆栈(Stack)又称为栈或堆叠,是计算机科学中一种特殊的串列形式的抽象数据类型(ADT),其特殊之处在于只能允许在阵列的一端进 ...

  2. oracle 清理跟踪文件.trc .trm

    trc,trm文件介绍:trc:系统的跟踪文件(trace),当系统启动时或运行过程中出现错误时,系统会自动记录跟踪文件到指定的目录,以便于检查,这些文件需定期维护删除.trm:伴随着.trc文件产生 ...

  3. Flask保存或解压上传的文件

    import os import uuid import shutil import zipfile from flask import Flask, render_template, request ...

  4. webpack3 + vue 添加 serviceWorker

    新的vue脚手架已经可以自带pwa了,本文主要针对旧版的webpack. 先装三个插件: $npm i register-service-worker sw-precache-webpack-plug ...

  5. redis+php+mysql处理高并发实例

    一.实验环境ubuntu.php.apache或nginx.mysql二.利用Redis锁解决高并发问题,需求现在有一个接口可能会出现并发量比较大的情况,这个接口使用php写的,做的功能是接收 用户的 ...

  6. pandas 处理 excel

    先写下来,以免后续忘记,有很多都是之前用过的, 依旧忘!!! 嘤嘤嘤 data_file = pandas.read_excel('/imporExcel/2017_7_7.xlsx',sep = ' ...

  7. LES on MCT

  8. 【Codeforces 567D】One-Dimensional Battle Ships

    [链接] 我是链接,点我呀:) [题意] 长度为n的一个序列,其中有一些部分可能是空的,一些部分是长度为a的物品的一部分 (总共有k个长度为a的物品,一个放在位置i长度为a的物品会占据i,i+1,.. ...

  9. image url to base64

    image url to base64 https://www.base64-image.de/ https://www.browserling.com/tools/image-to-base64 h ...

  10. noip模拟赛 序

    [问题背景]zhx 给他的妹子们排序.[问题描述]zhx 有 N 个妹子, 他对第 i 个妹子的好感度为 ai,且所有 ai两两不相等. 现 在 N 个妹子随意站成一排, 他要将她们根据好感度从小到大 ...