纯css3实现的圆形进度条

向右看齐 2022-08-03 03:10 284阅读 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，用来实现剪裁。

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个圆形进度条（vue）

实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创

淡淡的烟草味﹌/ 2022年12月07日 12:21/ 0 赞/ 441 阅读

相关纯css实现进度条百分比效果

> 一个完整的进度条效果其实可以拆分一下 > 一段背景 > 一小段的静态的斜纹进度条 > 斜纹进度条用线性渐变 linear-gradien

亦凉/ 2022年10月07日 04:59/ 0 赞/ 307 阅读

相关自定义圆形进度条的实现方式

如何自定义圆形进度条哪，也就是替换一下进度条的图片而已。先分析一下，系统对进度条如何定义的：咱们一般情况下载布局文件中这么书写： \[html\] [view pl

柔情只为你懂/ 2022年09月18日 10:54/ 0 赞/ 240 阅读

相关 css3圆弧占比,圆形进度条/百分比数据 --- 利用css3和js实现

乐师傅-注册 body \{ font-family: "微软雅黑"; \} .circle \{ width: 200px; height: 200px; po

ゝ一纸荒年。/ 2022年09月02日 14:54/ 0 赞/ 332 阅读

相关自定义View实现圆形进度条及圆形Loading

一、自定义View的四部曲: > 1、曲一：在res/values文件夹下，新建一个attrs.xml文件，然后在文件中去自定义属性，并且在<declare-stylea

亦凉/ 2022年08月19日 15:17/ 0 赞/ 286 阅读

相关纯css3实现的圆形进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ

向右看齐/ 2022年08月03日 03:10/ 0 赞/ 285 阅读

相关详解用CSS3制作圆形滚动进度条的动画效果

今天手把手教大家用CSS3制作圆形滚动进度条动画！先看一下效果图，会提升我们的学习兴趣哟： ![70][] > 第一种效果： html结构： <div id

た入场券/ 2022年05月19日 05:34/ 0 赞/ 610 阅读

相关 Android圆形进度条

自定义圆形进度条，见下图： ![70][] 1、自定义进度条类： package com.example.msh.view; import an

叁歲伎倆/ 2022年05月16日 04:30/ 0 赞/ 519 阅读

相关纯CSS3进度条制作-Pure CSS3 Progress Bar

1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----[demo][]\---- ![20130506213916831][] 2.难点分析圆角

骑猪看日落/ 2022年02月25日 00:52/ 0 赞/ 299 阅读

相关不可思议的纯 CSS 滚动进度条效果

结论先行，如何使用 CSS 实现下述滚动条效果？ [![scrollbar][]][scrollbar 1] 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在

小咪咪/ 2022年01月30日 11:19/ 0 赞/ 291 阅读