css3 实现加载滚动条效果
2024-08-24 21:39:30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { position:absolute; height:2px; -webkit-box-shadow:#2085c5 1px 0 6px 1px; -webkit-border-radius:100%; opacity:1; width:150px; right:-10px; -webkit-animation:pulse 2s ease-out 0s infinite; } @-webkit-keyframes pulse { 30% { opacity:.6 } 60% { opacity:0; } 100% { opacity:.6 } } </style> <div id="progress"> <span></span> </div> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $({property: 0}).animate({property: 100}, { duration: 3000, step: function() { var percentage = Math.round(this.property); $('#progress').css('width', percentage+"%"); if(percentage == 100) { $("#progress").addClass("done");//完成,隐藏进度条 } } }); }) </script> </body> </html>
最新文章
- 红米2A高配刷机记录
- KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序
- zmap在阿里云主机上的编译
- CSS级联和继承
- 内核linux-3.4.2支持dm9000
- 【python爬虫】根据查询词爬取网站返回结果
- android图片压缩方法
- Keil uVISION2 自学教程
- Net 并行知识学习
- POJ 3267-The Cow Lexicon(DP)
- java课程设计-表达式运算(团队博客)
- Android远程桌面助手(B1371)
- Aras 引入外部的dll
- 通过FileReader和FileWriter实现复制文件的方法。
- SDWebImage之SDWebImageManager
- WebService服务发布与使用(JDK自带WebService)
- Java编程的逻辑 (80) - 定时任务的那些坑
- iOS 判断App启动方式
- Pycharm主题设置以及导入方式
- Error setting expression &#39;XXX‘&#39;[Ljava.lang.with value &#39;[Ljava.lang.String;@10101fb&#39;