效果图

实现过程分析

简要说明

• 本文主要以 TypeScript + React 为例进行讲解, 但相关知识和这个关系不大. 不会也不影响阅读
• dome 中使用到了 sass, 但用法相对简单, 不影响理解

HTML DOM 元素说明

<div className="g-progress-wrap">
    <div className="g-progress"></div>
    <div className="g-circle">
        <span className="g-circle-before"><i/></span>
        <span className="g-circle-after"><i/></span>
    </div>
    <div className="g-text">
        20%
    </div>
</div>

• g-progress-wrap 包裹 progress, 所有的内容都在这里面
• g-progress 主要的区域
• 为了保证圆环有圆角效果 g-circle 内的有 2 个小圆, 放置到圆环的开始和结尾
• g-text 放置文字区域

上面已经介绍了 html, 因为主要的处理都在css, 所以接下来只说 css

第一步, 实现一个圆

.g-progress {

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#1677ff 0, #1677ff 108deg, #eeeeee 108deg, #eeeeee 360deg);
}

• border-radius: 50%; 实现圆形

• 使用 background 实现背景颜色

  • conic-gradient 创建了一个由渐变组成的图像，渐变的颜色变换围绕一个中心点旋转
  • 当角度为 0 – 108deg 时, 颜色为: #1677ff; 当角度为 108deg – 360deg 时, 颜色为: #eeeeee;

第二步, 实现圆环效果

.g-progress {

    /* 新增代码 */
    /* mask: radial-gradient(transparent, transparent 44px, #000 44.5px, #000 100%); */
    -webkit-mask: radial-gradient(transparent, transparent 44px, #000 44.5px, #000 100%);
}

• 通过使用 mask属性, 隐藏 中间区域的显示

• radial-gradient 创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成

  • 当为 0 – 44px 时, 颜色为: transparent; 当为 44px – 100% 时, 颜色为: #000;
  • 设置为 transparent 时, transparent 的区域的颜色会被隐藏

• 为什么不使用元素覆盖, 使用中间区域的隐藏

  • 如果用元素覆盖实现的话, 如果需要显示父级的背景色时, 没办法实现

第三步, 实现圆环的圆角效果

.g-circle {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotate(-90deg);
    &>span {
        position: absolute;
        top: 47px;
        left: 50px;
        width: 50%;
        transform-origin: left;
        &>i {
            width: 3px;
            height: 3px;
            float: right;
            border-radius: 50%;
            background: #1677ff;
            z-index: 1;
        }
    }
    & .g-circle-after {
        transform: rotate(0deg);
    }
}

第四步, 文字效果处理

.g-text {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666666;
}

第五步, 进度变化时, 通过js更新

通过行内样式更新 rotate 的方式即可更新进度

参考文档

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

www.cnblogs.com/coco1s/p/15…