如何实现圆形进度条？现有CSS+HTML代码效果不符需求求解决方法

API 探路者

2026-9-28

调整要点

补全::after伪元素的content属性，缺失该属性时伪元素不会被浏览器渲染
修正linear-gradient的语法错误，参数分隔符从分号改为逗号
调整渐变旋转逻辑适配半圆进度条的显示规则，新增CSS变量控制进度百分比，后续修改进度无需调整其他代码
修正文字颜色与背景对比度问题，调整行高让文字垂直居中
删除不必要的缩放属性，避免元素溢出布局

完整可运行代码

.circular-progress{
    /* 进度配置：半圆总旋转范围180deg对应100%进度，可自行调整 */
    --progress: 120deg;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    margin: auto;
    background: linear-gradient( 0deg, pink 50%, #111 50%);
    position: relative;
 }
.circular-progress:before {
    content: "Hola";
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    padding: .5rem;
    box-sizing: border-box;
    font-size: 2rem;
    background: #111 content-box;
    color: #fff;
    text-align: center;
    line-height: 11rem;
  }
.circular-progress::after {
    content: "";
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: linear-gradient( transparent 50%, pink 50% );
    transform: rotate(var(--progress));
  }