关键词:
进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码:
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 html, body { 8 font-family: arial, "microsoft yahei"; 9 font-size: 14px; 10 background: #c2d7ac; 11 } 12 13 .progress { 14 width: 300px; 15 height: 30px; 16 margin: auto;; 17 background: #70b4e5; 18 border-radius: 5px; 19 -webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd; 20 box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd; 21 } 22 23 .progress_bar { 24 width: 0%; 25 height: 26px; 26 background: url("images/bar.jpg") repeat; 27 background-size: auto 100%; 28 border-radius: 5px; 29 position: relative; 30 left: 3px; 31 right: 3px; 32 top: 2px; 33 } 34 35 p { 36 width: 300px; 37 text-align: center; 38 font-size: 14px; 39 color: #c20606; 40 position: absolute; 41 top: 98px; 42 } 43 </style>
<body onload="fakeProgress(0, load)"> <div style="height: 120px;"></div> <div class="progress"> <div id=load> <div class="progress_bar"></div> <p>0</p> </div> </div>
1 <script type="text/javascript"> 2 function setLOAD(v, el) { 3 var read = (document.all && document.getElementsByTagName); 4 if (read || document.readyState == "complete") 5 valueEl = el.children[1]; 6 { 7 filterEl = el.children[0]; 8 valueEl.innerText = v + "%"; 9 filterEl.style.width = v + "%"; 10 11 } 12 } 13 function fakeProgress(v, el) { 14 if (v > 100) 15 location.href = "begin.html"; 16 else { 17 setLOAD(v, el); 18 window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000); 19 } 20 } 21 </script>
效果图:
uploadifive.js怎么去掉进度条
参考技术AUploadify中上传完毕会默认保留进度条并显示100%,前提设置removeCompleted为false,而UploadiFive中上传完毕后进度条自动消失 参考技术BUploadify中上传完毕会默认保留进度条并显示100%,前提设置removeCompleted为false,而UploadiFive... 查看详情
用js写一个网页进度条
一、基本思路为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为”Loading”。该函数接收2个参数,分别为arr、callback。其中arr定义图片数组,callback定... 查看详情
css系列网页头部进度条方式一
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>头部进度条</title><styletype="text/css">.loading{width:100%;height:100%;position:fixed;top:0;z-index 查看详情
ffmpeg+qt视频进度条控制——点击跳转和拖动跳转(代码片段)
首先进度条采用Qslider,设置进度条主要有两点,一是当前视频总时长,二是当前播放时长,需要通过FFmpeg转码成mp4文件才能获取相应的时长数据;往期回顾:【Qt+FFmpeg】视频转码详细流程_logani的博客-CS... 查看详情
c#通过线程来控制进度条(转)--讲解多线程对界面的操作
//通过创建委托解决传递参数问题privatevoid_btnRun_Click(objectsender,System.EventArgse){RunTaskDelegaterunTask=newRunTaskDelegate(RunTask);//委托同步调用方式runTask(Convert.ToInt16(_txtSecond.Value));}//通过创建委托解决传递参数问题,通过委托的 查看详情
如何在vue项目中给路由跳转加上进度条(代码片段)
...当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示)。虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验。本篇文章就来教你如何... 查看详情
进度条,最大值并重置为 100%
】进度条,最大值并重置为100%【英文标题】:Progressbar,maxandreseton100%【发布时间】:2017-11-2813:47:47【问题描述】:我正在处理连接到sql中的XP和MAXXP的进度条。每次单击按钮时,您都会获得1xp,最大xp为10。我希望当用户达到100%XP... 查看详情
AngularJS - 进度条为 100% 后重新加载页面 5 秒
】AngularJS-进度条为100%后重新加载页面5秒【英文标题】:AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】:2019-10-1801:38:26【问题描述】:我想在进度条达到100%后5秒后重新加载页面我的代码是:<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情
js应用例子——进度条
<styletype="text/css">*{margin:0pxauto;padding:0px;}#wai{width:100%;height:600px;}#jwk{width:200px;height:15px;margin-top:50px;border:1pxsolid#F00;}#nei{width:0px;height:15px;background-color:#F 查看详情
js中如何设置进度条满后自动跳转?
一个max为100的进度条(在div1中),如何设置当进度条读满的时候自动隐藏div1,显示div2?(点击按钮的实现方法我已经实现,但是不知道怎么自动更改),还有就是如果div2中也有一个进度条,如何设置跳转至div2后进度条自动开始前进... 查看详情
Swift Progress View 动画使进度条超过 100%
】SwiftProgressView动画使进度条超过100%【英文标题】:SwiftProgressViewanimationmakesthebargofurtherthan100%【发布时间】:2017-06-0618:52:18【问题描述】:当为ProgressView使用动画时,如果我让动画用完,它完全可以正常工作,但如果我在动画仍... 查看详情
如何用js获取audio标签的已播放时长并控制进度条的width
我在写一个网页MP3播放器,没有使用audio标签的控制条而是用css写了一个,但是在通过进度条显示并控制播放进度的时候出了点问题,我想通过修改CSS中的width值来控制进度条的进度,请问该如何写JS?图片中那个进度条的id是view... 查看详情
unity使用ugui实现王者荣耀ui界面加载页面(进度条)(代码片段)
...用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情
unity使用ugui实现王者荣耀ui界面加载页面(进度条)(代码片段)
...用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情
c#控制台console进度条(代码片段)
1说明笔者大多数的开发在Linux下,多处用到进度条的场景,但又无需用到图形化界面,所以就想着弄个console下的进度条显示。2步骤清行显示//清行处理操作intcurrentLineCursor=Console.CursorTop;//记录当前光标位置Console.SetCursorPosition(0,Co... 查看详情
控制台进度条
...理资料的时候,翻出多年前在网上看到的一篇帖子,一个控制台的进度条,非常酷炫,原文出处-传送门。 记得在刚开始接触编程的时候,用控制台写些小工具玩,也喜欢将信息打印到屏幕上,看着不断闪动的屏幕... 查看详情
vue项目页面跳转时候的,浏览器窗口上方的进度条显示(代码片段)
1.安装:cnpminstall--savenprogress2.在main.js中引入:1importNProgressfrom‘nprogress‘2import‘nprogress/nprogress.css‘3.在main.js中进行配置:1NProgress.configure(2easing:‘ease‘,//动画方式3speed:500,//递增进度条的速度4showSpinner 查看详情
flash网站加载太慢,如何加进度条
...flash过大,很久都打不开,页面程空白状,问:如何加入进度条,要自动跳转的,是用flash做还是代码做??求高手解救啊,不会吝啬分数的先用flash做一个加载界面,这个界面只包含加载背景和加载进度条,内容体积将后很小,... 查看详情