纯css3实现的圆形进度条

最新推荐文章于 2024-05-13 14:39:47 发布

cwzhsi

最新推荐文章于 2024-05-13 14:39:47 发布

阅读量6.7k

点赞数

分类专栏： css 文章标签：进度条 css3

本文链接：https://blog.csdn.net/cwzhsi/article/details/47144501

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.spinner{ /*半透明蓝色的圆弧，形成进度条的背景，透明的半圆弧和蓝色的半圆弧交替旋转构成进度条*/
				font-size: 20px;
				width: 1em;
				height: 1em;
				border-radius: 50%;
				box-shadow:inset 0 0 0 .1em rgba(58, 168, 237, .2);
			}
			.spinner i {  /*创造了一个透明矩形的一半*/
				position:absolute;
				width:1em;
				height:1em;
				clip: rect(0, 1em, 1em, .5em);
				animation: spinner-circle-clipper 1s ease-in-out infinite;
			}
			@keyframes spinner-circle-clipper {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(180deg);
				}
			}
			.spinner i:after { /*l蓝色的半圆弧*/
				position:absolute;
				clip: rect(0, 1em, 1em, .5em);
				width:1em;
				height:1em;
				content: '';
				animation: spinner-circle 1s ease-in-out infinite;
				border-radius: 50%;
				box-shadow:inset 0 0 0 .1em #3aa8ed;
			}
			@keyframes spinner-circle {
			    0% {
			        transform: rotate(-180deg);
			    }

			    100% {
			        transform: rotate(180deg);
			    }
			}

		</style>
	</head>
	<body>
		<div class="spinner"><i></i></div>
	</body>
</html>

主要由三部分构成，半透明圆弧，透明矩形的一半，蓝色半圆弧。透明半圆弧和蓝色半圆弧交替旋转。

这里需要注意的是css3中的clip，用来实现剪裁。

cwzhsi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css3实现的圆形进度条

.spinner{ /*半透明蓝色的圆弧，形成进度条的背景，透明的半圆弧和蓝色的半圆弧交替旋转构成进度条*/ font-size: 20px; width: 1em; height: 1em; border-radius: 50%; box-shadow:inset 0 0 0 .1em rgba(58, 168, 237, .2); } .sp
复制链接

扫一扫

专栏目录