【CSS】环形进度条

最新推荐文章于 2024-05-13 18:48:47 发布
最新推荐文章于 2024-05-13 18:48:47 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： 环形进度条

效果图

原理剖析

1.先完成这样一个半圆（这个很简单吧）

2.overflow: hidden;

3.在中间定位一个白色的圆形做遮挡

4.完成另一半

5.使用animate配合时间完成衔接

源码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>环形进度条</title>
    <style>
        .wrapper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 4em;
            height: 4em;
            margin: auto;
        }
        .container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2em;
            overflow: hidden;
        }
        .halfCir {
            width: 2em;
            height: 4em;
            background: red;
        }
        .container1 {
            left: 2em;
        }
        .container1 .halfCir {
            left: 0;
            border-radius: 0 4em 4em 0;
            transform-origin: 0 50%;
            animation: halfCir1 4s infinite linear;            
        }
        .container2 {
            left: 0;
        }
        .container2 .halfCir {
            border-radius: 4em 0 0 4em;
            transform-origin: 2em 2em;
            animation: halfCir2 4s infinite linear;
        }
        @keyframes halfCir1 {
            50%, 100% {
                transform: rotateZ(180deg);
            }
        }
        @keyframes halfCir2 {
            0%, 50% {
                transform: rotateZ(0);
            }
            100% {
                transform: rotateZ(180deg);
            }
        }
        .wrapper::after {
            position: absolute;
            top: 0.5em;
            left: 0.5em;
            width: 3em;
            height: 3em;
            background: #fff;
            border-radius: 50%;
            content: "";    
        }
        .cir {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 0.5em;
            height: 0.5em;
            margin: auto;
            background: red;
            border-radius: 50%;
        }
        .cir2 {
            transform-origin: 50% 2em;
            animation: cir2 4s infinite linear;
        }
        @keyframes cir2 {
            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper"> 
        <div class="container container1"> 
            <div class="halfCir"></div> 
        </div> 
        <div class="container container2"> 
            <div class="halfCir"></div> 
        </div>
        <div class="cir cir1"></div> 
        <div class="cir cir2"></div>
    </div>
</body>
</html>

原文地址：https://www.cnblogs.com/linxian95/p/10141653.html

我的乌托
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android中自定义圆环显示实时进度，仿里程进度
小寒的博客
08-25 536
Android实现圆环进度条，显示出来实时进度 废话不多说，直接上效果图，普通的圆环进度条颜色是渐变，，这个是分段的颜色并且还要加刻度，下面看代码 白点是实时进度，自定义画上，并且保持实时进度 计算实时进度，白点所占位置 canvas.save(); paint_2.setStyle(Paint.Style.STROKE); int sweep; if (currentNum <= maxNum) { double zhb =
css 实现圆环进度条
快乐是一切的博客
11-26 6187
先上图，最后的效果是这样 主要的思路是 使用锥形渐变给div一个背景，然后使用mask遮挡中间部分，这样就变成一个圆环了，最后用 before和after处理一下 圆环进度开始和结束位置。 html <div class="shadow"></div> css .shadow { width: 100px; height: 100px; display: relative; border-radius: 50%; background: conic-gradient
可分割的环形进度条
06-13
可分割的环形进度条，适合倒计时等场景，已经定义好，只需把文件拷入即可使用
CSS环形进度条
最新发布
L_Y_J_21的博客
05-13 330
【代码】CSS环形进度条。
CSS把圆分八等份
jack_rose_me的博客
12-03 2706
简介 对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对，要么使用z-index 问题2 重点代码 1 半圆和圆 .circle-left{ width: 100px;height: 200px; border
css+div实现进度条效果
weixin_42573146的博客
01-10 1099
&lt;div class="progress"&gt;               &lt;div class="jindu"&gt;                     兑换进度                 &lt;/div&gt;                 &lt;div class="bar"&gt;&lt;/div&gt;           
javascript css环形进度条
11-20
HTML + CSS + JavaScript
使用CSS3实现环形进度条效果
09-27
主要介绍了使用CSS3实现环形进度条效果,需要的朋友可以参考下
17款CSS3计时器 环形进度条效果集.rar
07-10
17款CSS3计时器 环形进度条效果集，这些进度条虽然风格相似，但每一个又各不相同，用这些进度条的样式生成了计时器，可自身根据定时器走时，通过本源码你可体验HTML5 CSS3的强大之处，截图效果只是其中几款，更多...
环形进度条
12-04
使用css3来实现环形进度条，只传入百分比中的数字即可展示环形状态，可以根据具体需求进行代码修改
CSS锥形渐变实现环形进度条
qq_40289557的博客
10-27 4735
本章简单介绍一下CSS锥形渐变（conic-gradient）在可视化图表中的应用场景。采用vue+原生css的形式进行案例展示、在了解本章节之前，需要对vue框架、css变量、css属性conic-gradient有一定程度的认识
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
基于html5的纯js+css实现环形进度条
12-27
使用html5的canvas插件，配合css3就可以在页面上画出漂亮的环形进度条。
CSS实现环状进度条
qq_42396791的博客
02-09 515
CSS实现环状进度条
原生 css 实现进度条
逆风优雅的博客
04-07 4327
方案一：通过data控制它的样式 方案二：通过js控制进度条
CSS特效---环形进度条
nibabaoo的博客
04-23 408
css环形进度条
使用css3实现环形进度条
热门推荐
ClassicSong的博客
06-01 4万+
进度条效果如下： 整圆的效果处理会简单些，不完整环实现起来细节多点。下边是实现逻辑和过程。 进度条组成： 环形：两种颜色进度条，当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成；上叠加环形展示剩余量，深色；下叠加环形展示100%总量，浅色。 样式实现： 1：画一个方形，如图中阴影部分所示： 2：方形中画两个等大均分方形的矩形，(注意每个矩形一定要设置：o...
HTML+CSS 实现环形比例图效果
羽筠的博客
02-17 1万+
HMTL代码 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>百分比</title> <style type="text/css"> .yuan{...
html超百分比圆形图,纯CSS实现饼图、环形图（百分比）
weixin_35728532的博客
06-16 2189
一、饼图 .pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::before {content: '';display: block;margin-l...
用html+css实现环形进度条
05-24
可以使用CSS3的transform属性和animation属性来实现环形进度条。下面是一个简单的示例代码： ```html <div class="progress-ring"> <div class="progress-bar"></div> </div> ``` ```css .progress-ring { position: relative; width: 120px; height: 120px; margin: 20px; } .progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #eee; border-top-color: #09c; transform-origin: center center; animation: progress 2s linear forwards; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 在这个示例中，使用了一个外部容器和一个内部容器，外部容器定义了进度条的大小和位置，内部容器是一个圆形边框，通过CSS3的transform属性实现旋转动画，通过animation属性定义动画效果。你可以根据需要调整外部容器和内部容器的尺寸和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值