时间戳

首页 > 解决方案 > CSS：添加第二种颜色的圆形进度条

css - CSS：添加第二种颜色的圆形进度条

问题描述

这是一个jsfiddle：https ://jsfiddle.net/pgckezw7/3/

基本上，它适用于 1 种颜色，但不适用于 2 种颜色。

有2种颜色，问题是如果第一个百分比<= 50，那么即使两种颜色的总和> 50，第二个百分比也不会超过50。（如jsfiddle中的第一个圆圈所示）

但是对于 2 种颜色，如果第一个百分比 > 50，它会按预期工作（显示在 jsfiddle 的第 2 和第 3 个圆圈中）

为了显示第二种颜色，我添加了left-side-2类。

$progress (percentage1) 和$snapSize (percentage2) 是需要使用不同颜色的两个百分比。

主要逻辑在draw-progress mixin内部，在jsfiddle的底部，我循环了progress-(percentage1)-(percentage2)的类名

任何帮助或提示表示赞赏，也许我采取的方法是错误的？提前致谢。

这是代码：HTML：

progress-45-50，不起作用，因为 percent1(45) 小于 50，总共只能加起来 50。45 <= 50 && 45 + 50 > 50，只会渲染 45-5。

progress-51-20，有效，因为 percent1(51) 大于 50。

<div class="pie-wrapper progress-45-50 style-2">
    <span class="label">45<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side-2 half-circle"></div>
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>

SCSS：

@mixin draw-progress($progress, $color, $snapSize, $snapColor) {
  .pie {
    .half-circle {
      border-color: $color;
    }
    
    .left-side-2 {
      transform: rotate(($progress + $snapSize) * 3.6deg);
      border-color: $snapColor;
    }

    .left-side {
      transform: rotate($progress * 3.6deg);
    }
    @if $progress + $snapSize > 50 and $progress <= 50 {
      .right-side {
        display: none;
      }
    }
    @if $progress <= 50 {
      .right-side {
        display: none;
      }
    } @else {
      clip: rect(auto, auto, auto, auto);

      .right-side {
        transform: rotate(180deg);
      }
    }
  }
}

我希望对我在 scss 中的绘制进度有所帮助，这部分

@if $progress + $snapSize > 50 and $progress <= 50 {
      .right-side {
        display: none;
      }
    }

标签： csssass

解决方案

我建议使用conic-gradient现在得到很好支持的更简单的方法，并将其与 CSS 变量结合起来：

html,
body {
  background: #ecf0f1;
  color: #444;
  font-family: 'Lato', Tahoma, Geneva, sans-serif;
  font-size: 16px;
  padding: 10px;
}

.box {
  font-size: 3em;
  width: 160px;
  height: 160px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position:relative;
  z-index:0;
}

.box::after {
  content: "%";
  font-size: .45em;
}

.box::before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding:16px;
  background:
    linear-gradient(#f3f3f3, #f3f3f3) content-box, /* this background will be shown if mask is no supported */
    conic-gradient(#3498db 0 var(--p1),red calc(var(--p1) + 0.5%) calc(var(--p1) + var(--p2)),grey 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#fff calc(100% - 15px));
}
<div class="box" style="--p1:40%;--p2:50%;">
  45
</div>

<div class="box" style="--p1:75%;--p2:25%;">
  75
</div>

<div class="box" style="--p1:90%;--p2:5%;">
  90
</div>

推荐阅读