php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现,下载进度条等经典案例

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务,网页加载等;如果有使用html5为手机布局的,也可以用于手机中~

效果图:

41e4029abed62930c82ba2c07ef7e581.gif

1、html结构:

0%

简单分析下:

p.loadBar代表整个进度条

p.loadBar p 设置了圆角表框 ,p.loadBar p span 为进度 (动态改变宽度), p.loadBar p span i 为进度填充背景色(即width=100%)

HTML的结构,大家可以自己设计,只要合理,都没有问题~

2、CSS:body

{

font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;

}

#content

{

margin: 120px auto;

width: 80%;

}

.loadBar

{

width: 600px;

height: 30px;

border: 3px solid #212121;

border-radius: 20px;

position: relative;

}

.loadBar p

{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

.loadBar p span, .loadBar p i

{

box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);

width: 0%;

display: block;

height: 100%;

position: absolute;

top: 0;

left: 0;

border-radius: 20px;

}

.loadBar p i

{

width: 100%;

-webkit-animation: move .8s linear infinite;

background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);

background-size: 40px 40px;

}

.loadBar .percentNum

{

position: absolute;

top: 100%;

right: 10%;

padding: 1px 15px;

border-bottom-left-radius: 16px;

border-bottom-right-radius: 16px;

border: 1px solid #222;

background-color: #222;

color: #fff;

}

@-webkit-keyframes move

{

0%

{

background-position: 0 0;

}

100%

{

background-position: 40px 0;

}

}

此时效果为:

1edec7ffae41de6faccf31ee9bbbd445.png

整体布局就是利用position relative和absolute~

比较难的地方就是,渐变条的实现:

我们采用

a、从左上到右下的渐变

b、颜色分别为:0-25% 为#7ed047 , 25%-50% 为#4ea018 , 50%-75%为#7ed047 , 75%-100%为#4ea018

c、背景的大小为40px 40px 这个设置超过高度就行, 越大,条文宽度越宽

分析图:

bb8039b85c5ddbcda4c3b5610707a789.png

设置的原理就是上图了,同时可以背景宽度设置越大,条文宽度越大;

3、设置Js,创建LoadBar对象function LoadingBar(id)

{

this.loadbar = $("#" + id);

this.percentEle = $(".percent", this.loadbar);

this.percentNumEle = $(".percentNum", this.loadbar);

this.max = 100;

this.currentProgress = 0;

}

LoadingBar.prototype = {

constructor: LoadingBar,

setMax: function (maxVal)

{

this.max = maxVal;

},

setProgress: function (val)

{

if (val >= this.max)

{

val = this.max;

}

this.currentProgress = parseInt((val / this.max) * 100) + "%";

this.percentEle.width(this.currentProgress);

this.percentNumEle.text(this.currentProgress);

}

};

我们创建了一个LoadBar对象,同时公开了两个方法,一个设置最大进度,一个设置当前进度;比如下载文件最大进度为文件大小,当前进度为已下载文件大小。

4、测试

最后我们测试下我们的代码:$(function ()

{

var loadbar = new LoadingBar("loadBar01");

var max = 1000;

loadbar.setMax(max);

var i = 0;

var time = setInterval(function ()

{

loadbar.setProgress(i);

if (i == max)

{

clearInterval(time);

return;

}

i += 10;

}, 40);

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java web项目中连接mysql数据库,javaweb之eclipse工程连接mysql数据库

javaweb之eclipse工程连接mysql数据库准备工作:1.在mysql官网下载mysqlconnection的jar包输入网址:mysql.com—点击DOWNLOADS——下拉选择MySQL Community (GPL) Downloads ——选择Connector/J——下载后解压——找到mysql-connector-java-8.0.22.jar2.…

Win7的市场份额终于超过XP了,以后可以逐渐考虑放弃ie6/7了!

Win7的市场份额终于超过XP了,以后可以逐渐考虑放弃ie6/7了! 开心啊,诸位web开发们…… 图片来源:http://thenextweb.com/microsoft/2012/09/01/windows-7-finally-overtakes-windows-xp-mac-os-x-overtakes-windows-vista/

SWIFT推送之本地推送(UILocalNotification)之二带按钮的消息

上一篇讲到的本地推送是普通的消息推送,本篇要讲一下带按钮动作的推送消息,先上个图瞅瞅: 继上一篇的内容进行小小的改动: 在didFinishLaunchingWithOptions方法内进行以下修改 123456789101112131415161718192021222324252627282…

树状数组基础

关于树状数组的讲解推荐《算法竞赛入门经典训练指南》 一维版本&#xff1a; 洛谷3374 分析&#xff1a;树状数组裸的模板题 1 #include<iostream>2 #include<cstdio>3 #include<cstring>4 using namespace std;5 const int maxn50000010;6 int c[maxn];7 in…

vue1升级到vue2的问题

router 不能用map方法了&#xff0c;需要改router的结构改为routers [ { // 当没有匹配路由时默认返回的首页 path:/index, component: index, authenticate:true }, { // 当没有匹配路由时默认返回的首页 path: /spa/, component: i…

Spring Boot 学习笔记--整合Thymeleaf

1.新建Spring Boot项目 添加spring-boot-starter-thymeleaf依赖 1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3 <artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency> 2.添加静态文件 根据…

BZOJ 4241 分块

思路&#xff1a; 考虑分块 f[i][j]表示从第i块开头到j的最大值 cnt[i][j]表示从第i块开始到序列末尾j出现了多少次 边角余料处理一下就好啦~ //By SiriusRen #include <cmath> #include <cstdio> #include <algorithm> using namespace std; const int …

django ORM创建数据库方法

1、指定连接pymysql(python3.x) 先配置_init_.py import pymysqlpymysql.install_as_MySQLdb() 2、配置连接mysql文件信息 settings.py DATABASES {default: {ENGINE: django.db.backends.mysql, NAME: django_orm, #你的数据库名称USER: root, #你的数据库用户名PASSWOR…

【计算机视觉】基于OpenCV的人脸识别

一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库。它包含成千上万优化过的算法&#xff0c;为各种计算机视觉应用提供了一个通用工具包。根据这个项目的关于页面&#xff0c;OpenCV 已被广泛运用在各种项目上&#xff0c;从谷歌街景的图片拼接&#xff0c;到交互艺术展…

四则运算题目生成程序(基于控制台)

基于控制台的四则运算 代码地址 a.需求分析 运算符为 , −, , 除了整数以外&#xff0c;还要支持真分数的四则运算&#xff0c;真分数的运算&#xff0c;例如&#xff1a;1/6 1/8 7/24要求能处理用户输入的真分数&#xff0c; 如 1/2, 5/12 等并且要求能处理用户的输入&#…

前端学习(2306):react之组件使用

Home.js import React, {Component} from react;class Home extends Component {render() {return (<div><div>你好我是组件{parseInt(Math.random()*10)}</div><div>你好我是组件2{parseInt(Math.random()*10)}</div></div>);} }export …

前端学习(2306):react之组件使用之图片使用

Home.js import React, {Component,Fragment} from react; import ImgA from "../assset/index.jpg" class Home extends Component {render() {return (<Fragment><div>你好我是组件{parseInt(Math.random()*10)}</div><div>你好我是组件2…

php背景图添加字,怎样给视频后面加背景图 视频加背景图片并添加一行广告文字...

有不少广告小视频中&#xff0c;视频画面是一张海报背景图片&#xff0c;图片上显示一个小视频播放&#xff0c;并且在画面上还有显示一行广告字幕。这样的宣传视频制作其实蛮简单的&#xff0c;怎样给视频后面加背景图片的方法倒是挺多&#xff0c;要给视频加背景图片的同时还…

前端学习(2307):react之props和state

Home,js import React, {Component} from react; import News from "./News"; class Home extends Component {render() {return (<div>home<News name"你好"/></div>);} }export default Home; news,js import React, {Component} f…

前端学习(2308):react之子传父

Home,js import React, {Component} from react; import News from "./News"; class Home extends Component {constructor(props) {super(props);this.state{text:我是默认值}}dataFun(text)>{console.log(text)this.setState({text})}render() {return (<di…

linux 密码复杂度,用PAM 搞定Linux 平台密码复杂度问题

用PAM 搞定Linux 平台密码复杂度问题星期五, 十二月 27, 20130作为一个PAM的一个模块&#xff0c;pam_cracklib可以被用来检查密码是否违反密码字典&#xff0c;这个验证模块可以通过插入password堆栈&#xff0c;为特殊的应用提供可插入式密码强度性检测&#xff0c;能够很好地…

前端学习(2309):react之同级传值

Home,js import React, {Component} from react; import News from "./News"; class Home extends Component {constructor(props) {super(props);this.state{text:我是默认值}}dataFun(text)>{console.log(text)this.setState({text})}render() {return (<di…

前端学习(2310):数据请求和json-server

app.js import React from react;import ./App.css; import Home from ./components/Home.js import World from "./components/World"; function App() {return (<div className"App">你好<World/></div>); }export default App;worl…

对Linux课程内容的建议,Linux课程笔记 Day01 课程内容总结(示例代码)

系统安装&#xff1a;引导项简单介绍&#xff1a;在“boot:”提示后&#xff1a;直接回车(Enter)——图形界面安装模式linux text——字符界面安装模式linux askmethod——提示用户选择安装方法(例如&#xff1a;nfs、ftp、http远程安装)linux rescue——救援模式&#xff0c;…