在javaScript和CSS中构建半圆弧/圆形进度条

Question

我一直在尝试建立一个半弧形进度条，它将不是从45度开始，结束到180度，而是30度/195度的频谱。

我还没有发现任何类似的例子，因为有很多例子只是半圆。

有没有人可以给我指出正确的方向或有一个例子?

谢谢!

Answer 1

你可以使用锥形渐变和一些CSS变量来获得一个简单的加载效果。

要计算角度，您可以使用公式(percent * (max - min) / 100) + min;，它将加载的百分比转换为我们需要的正确角度(度)。

只要JS中的MIN与CSS中设置的角度匹配，所有可能的角度组合都是可能的。(且MAX高于MIN)。

如果你用transparent代替CSS中的orange颜色，你会得到一个无瑕疵的加载器，尽管为了演示目的，保持它的颜色更容易。

const loader = document.querySelector('.progress');
const MIN = 30; // Must match CSS degrees
const MAX = 195;
function updateProgress(percent) {
const degrees = (percent * (MAX - MIN) / 100) + MIN;
loader.style.setProperty('--progress', `${degrees}deg`);
loader.textContent = `${percent}%`;
}
// Something is loading down here ...
let percent = 0;
setInterval(() => {
percent = (percent + 1) % 100;
updateProgress(percent);
}, 1000 / 30); // 30 FPS

.progress {
width: 100px;
height: 100px;
background-image: conic-gradient(
orange 30deg,
orangered 30deg var(--progress, 0), /* Set via JS */
orange var(--progress, 0) /* Set via JS */
);
border-radius: 50%;

/* center text */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}

<div class="progress"></div>

编辑:

const loader = document.querySelector('.progress');
const MIN = 30;
const MAX = 330;
// Set CSS properties
loader.style.setProperty('--min-degrees', `${MIN}deg`);
loader.style.setProperty('--max-degrees', `${MAX}deg`);
function updateProgress(percent) {
const degrees = (percent * (MAX - MIN) / 100) + MIN;
loader.style.setProperty('--progress', `${degrees}deg`);
}
// Something is loading down here ...
let percent = 0;
setInterval(() => {
percent = (percent + 1) % 100;
updateProgress(percent);
}, 1000 / 60); // 60 FPS

.progress {
width: 100px;
height: 100px;
/* Lightblue gradient */
background-image: conic-gradient(
transparent var(--min-degrees),
#E8F6FD var(--min-degrees) var(--max-degrees),
transparent var(--max-degrees)
);
border-radius: 50%;
transform: rotate(180deg); /* Rotate whole element to start from center bottom */
position: relative;
}
.progress::before {
content: "";
width: 100%;
height: 100%;
/* Darkblue gradient */
background-image: conic-gradient(
transparent var(--min-degrees),
#00ACEE var(--min-degrees) var(--progress, 0),
transparent var(--progress, 0)
);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
/* White circle on top to make it look like a cutout */
.progress::after {
content: "";
width: 75px;
height: 75px;
left: 12.5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #FFF;
border-radius: 50%;
}

<div class="progress"></div>