如何使用源生css3实现圆环加载进度条-css教程-PHP中文网

首页

web前端

css教程

如何使用源生css3实现圆环加载进度条

php中世界最好的语言

Jun 04, 2018 am 11:14 AM

css css3

这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.wrap,.circle,.percent{
		position: absolute;
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}
	.wrap{
		top:50px;
		left:50px;
		background-color: #ccc;
	}
	.circle{
		box-sizing: border-box;
		border:20px solid #ccc;
		clip:rect(0,200px,200px,100px);
	}
	.clip-auto{
		clip:rect(auto, auto, auto, auto);
	}
	.percent{
		box-sizing: border-box;
		top:-20px;
		left:-20px;
	}
	.left{
		transition:transform ease;
		border:20px solid blue;
		clip: rect(0,100px,200px,0);
	}
	.right{
		border:20px solid blue;
		clip: rect(0,200px,200px,100px);
	}
	.wth0{
		width:0;
	}
	.num{
		position: absolute;
		box-sizing: border-box;
		width: 160px;
		height: 160px;
		line-height: 160px;
		text-align: center;
		font-size: 40px;
		left: 20px;
		top: 20px;
		border-radius: 50%;
		background-color: #fff;
		z-index: 1;
	}
	</style>
	<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<p class="wrap">
	<p class="circle">
		<p class="percent left"></p>
		<p class="percent right wth0"></p>
	</p>
	<p class="num"><span>0</span>%</p>
</p>
</body>
<script>
	var percent=0;
	var loading=setInterval(function(){
		if(percent>100){
			percent=0;
			$('.circle').removeClass('clip-auto');
			$('.right').addClass('wth0');
		}else if(percent>50){
			$('.circle').addClass('clip-auto');
			$('.right').removeClass('wth0');
		}
		$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
		$('.num>span').text(percent);
		percent++;
	},200);
</script>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7448

CakePHP 教程

1374

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap如何上传文件 Apr 07, 2025 pm 01:09 PM

可以通过 Bootstrap 实现文件上传功能，步骤如下：引入 Bootstrap CSS 和 JavaScript 文件；创建文件输入字段；创建文件上传按钮；处理文件上传（使用 FormData 收集数据，然后发送到服务器）；自定义样式（可选）。

bootstrap日期怎么验证 Apr 07, 2025 pm 03:06 PM

在 Bootstrap 中验证日期，需遵循以下步骤：引入必需的脚本和样式；初始化日期选择器组件；设置 data-bv-date 属性以启用验证；配置验证规则（如日期格式、错误消息等）；集成 Bootstrap 验证框架，并在表单提交时自动验证日期输入。

Bootstrap列表如何移除默认样式？ Apr 07, 2025 am 10:18 AM

Bootstrap 列表的默认样式可以通过 CSS 覆盖来移除。使用更具体的 CSS 规则和选择器，遵循 "就近原则" 和 "权重原则"，覆盖 Bootstrap 默认的样式。为避免样式冲突，可使用更具针对性的选择器。如果遇到覆盖不成功的情况，可调整自定义 CSS 的权重。同时注意性能优化，避免过度使用 !important，撰写简洁高效的 CSS 代码。