三种方式实现：进度条

最新推荐文章于 2024-02-24 10:39:53 发布
最新推荐文章于 2024-02-24 10:39:53 发布
阅读量1k 收藏 5
点赞数
分类专栏： html技术 其他技术 文章标签： css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40687809/article/details/107016720
版权

1、Bootstrap实现进度条

bootstrap.min.css下载地址：https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css

bootstrap.min.js下载地址：https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js

基本的进度条组成是

<div class="progress"><!--外层-->
	<div class="progress-bar" style="width: 40%;"><!--内层--></div>
</div>

小demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title> 进度条</title>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
	bootstrap
	<div class="progress">
		<div class="progress-bar" style="width: 40%;">
		</div>
	</div>
</body>
</html>

默认四种颜色（当然颜色这玩意完全可以自定义）：

	<style>
		.progress-bar-self {
			background-color:#D58512;
		}
	</style>	
     <div class="progress">
		<div class="progress-bar progress-bar-success" style="width: 90%;">
			<span>90% 完成（成功）</span>
		</div>
	</div>
	<div class="progress">
		<div class="progress-bar progress-bar-info" style="width: 30%;">
			<span>30% 完成（信息）</span>
		</div>
	</div>
	<div class="progress">
		<div class="progress-bar progress-bar-warning" style="width: 20%;">
			<span>20% 完成（警告）</span>
		</div>
	</div>
	<div class="progress">
		<div class="progress-bar progress-bar-danger"style="width: 10%;">
			<span>10% 完成（危险）</span>
		</div>
	</div>
	<div class="progress">
		<div class="progress-bar progress-bar-self"style="width: 30%;">
			<span>30% 自定义</span>
		</div>
	</div>
	<div class="progress progress-striped"><!--progress-striped这个样式是斜纹-->
		<div class="progress-bar progress-bar-self"style="width: 35%;">
			<span>35% 斜纹</span>
		</div>
	</div>

进度条堆叠

	<!--如果多个父级div:progress合并，就能实现进度条堆叠-->
	<div class="progress">
		<div class="progress-bar progress-bar-info" style="width: 30%;">
			<span>30% 完成（信息）</span>
		</div>
		<div class="progress-bar progress-bar-warning" style="width: 20%;">
			<span>20% 完成（警告）</span>
		</div>
		<div class="progress-bar progress-bar-danger"style="width: 10%;">
			<span>10% 完成（危险）</span>
		</div>
		<div class="progress-bar progress-bar-self"style="width: 30%;">
			<span>30% 自定义</span>
		</div>
		<div class="progress-bar progress-bar-self"style="width: 35%;">
			<span>35% 斜纹</span>
		</div>
	</div>

2、Jquery+Css3实现进度条

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3进度条</title>
		<style>
			.loader-container {
				height: 6px;
				width: 600px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -3px;
				margin-left: -300px;
				background-color: transparent;
				background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
				background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
				background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
				background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
				background-image: linear-gradient(left, #5bd8ff, #ff0000);
				box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
				border-radius: 3px 0 0 3px;
			}
			
			.loader-container:after {
				content: "";
				display: block;
				position: absolute;
				right: 0;
				top: 50%;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				margin-top: -0.5em;
				margin-right: -1em;
				background-image: -webkit-linear-gradient(top, #000000, #212121);
				background-image: -moz-linear-gradient(top, #000000, #212121);
				background-image: -o-linear-gradient(top, #000000, #212121);
				background-image: -ms-linear-gradient(top, #000000, #212121);
				background-image: linear-gradient(top, #000000, #212121);
			}
			
			.loader-container.done:after {
				background: Red;
			}
			
			.run .runner {
				content: "";
				position: absolute;
				right: 0;
				height: 100%;
				width: 0%;
				background-color: transparent;
				background-image: -webkit-linear-gradient(top, #000000, #212121);
				background-image: -moz-linear-gradient(top, #000000, #212121);
				background-image: -o-linear-gradient(top, #000000, #212121);
				background-image: -ms-linear-gradient(top, #000000, #212121);
				background-image: linear-gradient(top, #000000, #212121);
				animation: loader 10s linear;
				color: white;
			}
			
			.meter {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 2em;
				margin-top: .3em;
				color: #ff0000;
				animation: meter 10s linear;
				text-shadow: 0 -1px 0 #333333;
			}
			
			.meter:after {
				content: "%";
			}
			/*@keyframes是css3样式，作用是：使 div 元素匀速向下移动：*/
			
			@keyframes loader {
				0% {
					width: 100%;
				}
				100% {
					width: 0%;
				}
			}
			
			@keyframes meter {
				0% {
					color: #5bd8ff;
				}
				100% {
					color: #ff0000;
				}
			}
			
			#wrapper {
				width: 600px;
				margin: 0 auto;
			}
		</style>
	</head>

	<body background="./1.jpg">
		<!--一张黑色背景图-->
		<div id="wrapper">
			<!--进度条-->
			<div class="loader-container run done">
				<div class="meter">100</div>
				<span class="runner">名称</span>
			</div>
		</div>
		<script>
			//按照时间动态加载的时间函数
			var Loader = function() {
				var loader = document.querySelector('.loader-container'),
					meter = document.querySelector('.meter'),
					k, i = 1,
					counter = function() {
						if(i <= 100) {
							meter.innerHTML = i.toString();
							i++;
						} else {
							window.clearInterval(k);
						}
					};

				return {
					init: function(options) {
						options = options || {};
						var time = options.time ? options.time : 0,
							interval = time / 100;
						loader.classList.add('run');
						k = window.setInterval(counter, interval);
						setTimeout(function() {
							loader.classList.add('done');
						}, time);
					},
				}
			}();
			Loader.init({
				time: 10000
			});
		</script>
	</body>

</html>



3、layui实现进度条

layui下载地址：https://www.layui.com/

下面是其官网给出的演示代码（尝试了一下，很好用）：https://www.layui.com/demo/progress.html

 

 

 

Thinking_Of_RedAnt
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现圆环进度条的三种方式 div svg canvas
05-02
实现圆环进度条的三种方式 div svg canvas 可加qq群：179916551 免积分获取，沟通交流
CSS3中的动画
chenyiboke的博客
11-16 893
动画 动画（animation） 是css中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个， 或一组动画 常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 1. 动画的基本使用 制作动画分为两步： 先定义动画 再使用（调用）动画 用keyfames定义动画（类似定义类选择器） @keyframes 动画名称{...
使用Python制作进度条有多少种方法？看这一篇文章就够了！
最新发布
码银的博客
02-24 3178
偶然间刷到一个视频，说到：当程序正在运算时，会有一个较长时间的空白期，谁也不知道程序运行的进度如何，不如给他加个进度条。于是我今个就搜寻一下，Python版的进度条都可以怎么写！
div+css进度条完美解决方案
08-30
一个javaweb资源，使用div+css完美解决进度条，后天传输list，jsp就能生成进度条。
软件启动进度条制作(使用自定义样式)
baidu_40624101的博客
06-09 881
有时候软件因为初始化内容较多加载过慢，导致打开软件出现一段时间的空白期，软件打开后显示启动画面可以弥补这个空白期
太好玩了，6种Python实现实时显示进度条
WANGJUNAIJIAO的博客
09-27 5834
相信大家对进度条一定不陌生了，比如在我们安装python库的时候可以看到下载的进度条，此外在下载文件时也可以看到类似的进度条，比如下图这种：应用场景：下载文件、任务计时等今天给大家分享Python的的实现实时显示处理进度的方式，文中每一种方式都附带一个案例，并提供官方文档，供大家学习，自定义去修改。
01、用三种方法实现 DIV + CSS 进度条的展示(静态以及动态)
狮子座的男孩
08-02 4565
最好可以绑定 data 中的数据值，根据不同的值来展示出不同的占比；其二、其次要中间的用有颜色的进度条来设置出静态的占比；其一、首先外面要有一层来表示进度条的宽度和长度；其四、最好最好可以动态绑定数据；其三、最好实现动态效果；...
Web实例——进度条
weixin_45975504的博客
01-27 1397
使用html，css和javascript 实现一个简单的进度条效果。
div css实现进度条
Artemis视同
02-02 5918
div css实现进度条 进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条。 我们先看下代码： div class="progress"> span class="bar" style="width: 40%;">40%span> div> 也可以将标签换为 下面重点是css代码： style type="text/css"> b
用div显示页面加载进度条
yale28的技术专栏
10-02 1979
对于加载时间比较长的ASP.NET页面，我们可以在客户端浏览器中显示进度条来显示页面正在装载。下面就是具体的实现过程 首先填加 引用 Using System.Threading; 然后在Page_Load事件中添加如下代码：Response.Write("");Response.Write("_");Response.Write("");Response.Write("mydiv
Android三种方式实现ProgressBar自定义圆形进度条
01-06
进度条样式在项目中经常可以见到，下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条。 Android进度条有4种风格可以使用。 默认值是progressBarStyle。 设置成progressBarStyleSmall后，图标变小...
css3 clip实现圆环进度条的示例代码
01-19
怎么实现这样一个圆环进度条的效果呢，可以使用canvas、svg、GIF等等方式，今天我们来说下使用css3怎么来实现。 实现思路 圆环很简单，一行cssborder-radius:50%即可实现，而且没有兼容性问题，什么，你说IE，让它滚...
php实现简单的上传进度条
12-19
Web上传文件的三种解决方案分享给大家： 这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性，让表单提交的数据以二进制编码的方式提交，在接收此请求的Servlet中用二进制流来获取...
一步实现多个同级div，只改变点击的当前div样式
qq_40687809的博客
09-03 4350
记录一点小技巧，直接上代码。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;一步实现多个同级div，只改变点击的当前div样式&lt;/title&gt; &lt;/head&gt; &lt;script type
Html使用Json
qq_40687809的博客
06-04 2146
【前言】前面咱们已经总结过，Java使用Json。《Java使用Json》下面我将继续学习，Html使用Json。【先来一个小demo】 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" ...
Springboot集成前端
qq_40687809的博客
07-07 1321
1、Springboot的结构 其中static中是可以直接访问的数据，templates中放置的是跳转的数据。 加入jar包的依赖 <!--application.properties中配置模板引擎--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sprin..
拆解Vue文件
qq_40687809的博客
02-21 610
Vue中的根标签，template，script，style记住这三个外部大标签。今天主要来记录一下script内的标签内的小标签。computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。当我们新建一个vue文件时，其vue文件就会自我生成一份最原始的结构代码。【二】template标签。vue中computed。【四】脚本script。【三】样式style。
uniapp 实现拖动进度条
09-08
要在 uniapp 中实现拖动进度条，你可以按照以下步骤进行操作： 1. 在你的页面中添加一个进度条组件，可以使用 `<progress>` 标签或者第三方组件库中的进度条组件。例如，如果你使用的是 uni-ui 组件库，可以使用其提供的 `<uni-progress>` 组件。 2. 在 data 中添加一个变量来存储进度条的当前值。例如，你可以在 data 中添加一个名为 `progressValue` 的变量，并将其初始化为某个默认值。 3. 监听进度条的拖动事件，当用户拖动进度条时，更新当前的进度条值。具体的实现方式取决于你选择的组件库和进度条组件。一般而言，你需要监听其 `change` 或 `drag` 事件，并在事件回调中更新 `progressValue` 变量。 4. 使用计算属性或监听器来动态更新页面中展示进度条的样式。根据 `progressValue` 的值，你可以设置进度条的宽度或者其他相关样式属性。 下面是一个简单的示例代码，演示了如何在 uniapp 中实现拖动进度条： ``` <template> <view> <uni-progress :percent="progressValue" @change="handleProgressChange"></uni-progress> </view> </template> <script> export default { data() { return { progressValue: 50, // 初始化进度条值 }; }, methods: { handleProgressChange(value) { this.progressValue = value; // 更新进度条值 }, }, }; </script> ``` 在上面的示例中，我们使用了 uni-ui 组件库中的 `<uni-progress>` 组件，并通过 `:percent` 属性绑定了进度条的值。在 `@change` 事件回调中，我们更新了 `progressValue` 变量。 请根据你的具体需求和所使用的组件库，调整代码以实现你想要的效果。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值