如何使用纯CSS将HTML5进度元素设置为Circle/Pie [英] How to style an HTML5 Progress Element as Circle/Pie with pure CSS
问题描述
HTML5引入了一个新的"progress"元素，默认情况下将其呈现为进度条(温度计).
HTML5 introduced a new "progress" element that by default is rendered as a progress bar (thermometer).
一个非常基本的示例是:
A very basic example is:
<progress max="100" value="85"></progress>
我一直在尝试使用javascript进行各种进度圈选项，并且这里所讨论的一些纯CSS方法也给我留下了深刻的印象: CSS进度圈
I have been experimenting with a variety of progress circle options using javascript, and also have been really impressed by some pure CSS approaches discussed here: CSS Progress Circle
我想知道是否有人成功将CSS应用于"progress"元素以提供饼图/时钟/圆形渲染而不是线性显示?
I am interested to know if anyone has successfully applied CSS to the "progress" element to provide a pie/clock/circle rendering rather than a linear display?
EDIT/ADDENDUM:"meter"元素也与"progress"非常相似，但提供了一个低/高范围...对于那些将来可能偶然发现此帖子并希望应用的人，我会提到更多与HTML5仪表元素类似的技术.
EDIT/ADDENDUM: The "meter" element is also quite similar to "progress" but provides for a low/high range...I mention this more for anyone who might stumble upon this post in the future and want to apply a similar technique to the HTML5 meter element.
推荐答案
尝试在纯CSS中做到这一点非常困难，所以我认为这不是正确的方法.
Trying to do this in pure CSS is quite hard, so I don't think than this is the correct technique to do it.
无论如何，就像技术练习一样，让我们尝试一下. (仅在Chrome中测试！)
Anyway, just as a technical exercise, let's try it. (Tested only in Chrome !)
首先是基础.我们将圆划分为4个象限，对于每个象限，我们将需要不同的样式.这里我们有样式，以颜色(绿色，红色，蓝色，黄色)显示进度值元素的有用范围.灰色区域是元素的其余部分，未使用.
First of all the basis. We are going to divide the circle in 4 quadrants, and for each one we will need a different style. Here we have the styles, showing in color (green, red, blue, yellow) the useful range of the progress value element. The gray area is the rest of the element, unused.
.test {
width: 100px;
height: 100px;
margin: 20px 10px 0px 20px;
border-radius: 50%;
background-image: radial-gradient(lightblue 62%, blue 40%);
position: relative;
display: inline-block;
}
.test div {
height: 30%;
transform-origin: left top;
position: absolute;
opacity: 0.5;
ackground-color: green;
}
.inner1 {
width: 25%;
left: 50%;
top: -20%;
background-color: green;
transform: rotate(45deg) scaleX(3.9598);
}
.inner2 {
width: 50%;
left: 190%;
top: -20%;
background-image: linear-gradient(to right,gray 50%, red 50%);
transform: rotate(135deg) scaleX(3.9598);
}
.inner3 {
width: 75%;
left: 190%;
top: 260%;
background-image: linear-gradient(to right,gray 66%, blue 66%);
transform: rotate(225deg) scaleX(3.9598);
}
.inner4 {
width: 100%;
left: -230%;
top: 260%;
background-image: linear-gradient(to right,gray 75%, yellow 66%);
transform: rotate(315deg) scaleX(3.9598);
}
<div class="test">
<div class="inner1"></div>
</div>
<div class="test">
<div class="inner2"></div>
</div>
<div class="test">
<div class="inner3"></div>
</div>
<div class="test">
<div class="inner4"></div>
</div>
现在，让我们展示一个创建径向线段的技巧.可以完成以下操作:为用户设置法线(成直角)并应用一些透视图:
Now, let's show a trick for creating the radial segments. This can be acomplished setting an element normal (at a right angle) to the user, and applying some perspective:
div {
width: 300px;
height: 300px;
position: relative;
}
.container {
perspective: 400px;
margin: 40px 200px;
border: solid 1px black;
}
.top {
position: absolute;
left: 0px;
top: -100%;
background-image: repeating-linear-gradient(to right, tomato 0px, white 20px);
transform: rotateX(90deg);
transform-origin: center bottom;
}
.right {
position: absolute;
left: 100%;
top: 0px;
background-image: repeating-linear-gradient( tomato 0px, white 20px);
transform: rotateY(90deg);
transform-origin: left center;
}
.bottom {
position: absolute;
left: 0px;
bottom: 0px;
background-image: repeating-linear-gradient(to right, tomato 0px, white 20px);
transform: rotateX(90deg);
transform-origin: center bottom;
}
.left {
position: absolute;
right: 100%;
top: 0px;
background-image: repeating-linear-gradient( tomato 0px, white 20px);
transform: rotateY(-90deg);
transform-origin: right center;
}
<div class="container">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
现在，只有一些无聊的选择器(很难将目标值定在20-29范围内，而不能同时将目标值定为2).
And now, just some boring selectors (it's difficult to target values in the range 20-29 and not targetting the value 2 at the same time).
一点点JS，但仅用于控制进度值.您可以同时使用输入和滑块进行更改.
A little bit of JS, but only to control the progress value. You can use both the input and the slider to change it.
function change () {
var input = document.getElementById("input");
var progress = document.getElementById("test");
progress.value = input.value;
}
function changeNumber () {
var input = document.getElementById("number");
var progress = document.getElementById("test");
progress.value = input.value;
}
.container {
width: 500px;
height: 500px;
overflow: hidden;
margin: 10px;
}
.test {
width: 200px;
height: 200px;
margin: 10px 10px;
border-radius: 50%;
background-image: radial-gradient(lightblue 62%, transparent 40%);
box-shadow: 0px 0px 0px 500px lightblue, inset 0px 0px 0px 2px lightblue;
}
.test::-webkit-progress-bar {
background-color: transparent;
position: relative;
border-radius: 50%;
perspective: 100px;
z-index: -1;
background-repeat: no-repeat;
}
.test[value^="2"]::-webkit-progress-bar,
.test[value^="3"]::-webkit-progress-bar
{
background-image: linear-gradient(red, red);
background-size: 50% 50%;
background-position: right top;
}
.test[value^="4"]::-webkit-progress-bar,
.test[value^="5"]::-webkit-progress-bar
{
background-image: linear-gradient(purple, purple);
background-size: 50% 100%;
background-position: right top;
}
.test[value^="6"]::-webkit-progress-bar,
.test[value^="7"]::-webkit-progress-bar,
.test[value="80"]::-webkit-progress-bar
{
background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
background-size: 50% 100%, 50% 50%;
background-position: right top, left bottom;
}
.test::-webkit-progress-bar,
.test[value="2"]::-webkit-progress-bar,
.test[value="3"]::-webkit-progress-bar,
.test[value="4"]::-webkit-progress-bar,
.test[value="5"]::-webkit-progress-bar,
.test[value="6"]::-webkit-progress-bar,
.test[value="7"]::-webkit-progress-bar,
.test[value="8"]::-webkit-progress-bar {
background-image: none;
}
.test::-webkit-progress-value {
background-color: green;
height: 30%;
transform-origin: left top;
z-index: -1;
position: absolute;
}
.test[value^="2"]::-webkit-progress-value,
.test[value^="3"]::-webkit-progress-value {
background-color: red;
top: -20%;
left: 190%;
transform: rotate(135deg) rotateX(-90deg) scaleX(3.9598);
}
.test[value^="4"]::-webkit-progress-value,
.test[value^="5"]::-webkit-progress-value {
background-color: purple;
left: 190%;
top: 260%;
transform: rotate(225deg) rotateX(-90deg) scaleX(3.9598);
}
.test[value^="6"]::-webkit-progress-value,
.test[value^="7"]::-webkit-progress-value,
.test[value="80"]::-webkit-progress-value {
background-color: blue;
left: -230%;
top: 260%;
transform: rotate(315deg) rotateX(-90deg) scaleX(3.9598);
}
.test::-webkit-progress-value,
.test[value="2"]::-webkit-progress-value,
.test[value="3"]::-webkit-progress-value,
.test[value="4"]::-webkit-progress-value,
.test[value="5"]::-webkit-progress-value,
.test[value="6"]::-webkit-progress-value,
.test[value="7"]::-webkit-progress-value,
.test[value="8"]::-webkit-progress-value
{
background-color: green;
left: 50%;
top: -20%;
transform: rotate(45deg) rotateX(-90deg) scaleX(3.9598);
}
<input id="input" type="range" value="0" min="0" max="80" onchange="change()" oninput="change()"/>
<input id="number" type="number" value="0" min="0" max="80" step="1" oninput="changeNumber()"/>
<div class="container">
<progress class="test" id="test" max="80" value="0"></progress>
</div>
溢出有一个困难:隐藏；和Chrome中的错误.不应期望它在应用了透视图的同一元素上工作，但应该将其应用于进度本身.它只工作一半时间...
There is a difficulty in the overflow: hidden; and a bug in Chrome. It isn't expected for it to work on the same element where perspective is applied, but it should work applied to the progress itself. It just works half of the time ...
另外，另一个想法是，样式要简单得多，我可以将其扩展到整个范围，但这仍然是一个起点:
Also, another idea, the style is much more simpler, and I could get it to extend to the full range, but anyway it's a starting point:
function change () {
var input = document.getElementById("input");
var progress = document.getElementById("test");
progress.value = input.value;
}
function changeNumber () {
var input = document.getElementById("number");
var progress = document.getElementById("test");
progress.value = input.value;
}
.test {
width: 400px;
height: 200px;
margin: 10px 10px;
border-radius: 9999px 9999px 0px 0px;
border: solid 1px red;
ackground-image: radial-gradient(lightblue 62%, transparent 40%);
ox-shadow: 0px 0px 0px 500px lightblue;
overflow: hidden;
}
.test::-webkit-progress-bar {
background-color: transparent;
position: relative;
border-radius: 50%;
perspective: 100px;
perspective-origin: center 300px;
z-index: -1;
background-repeat: no-repeat;
}
.test::-webkit-progress-value {
height: 300%;
transform-origin: center bottom;
bottom: -20%;
z-index: -1;
position: absolute;
background-image: linear-gradient(270deg, red 2px, tomato 30px);
transform: rotateX(-90deg) scaleX(1);
}
<input id="input" type="range" value="0" min="0" max="80" onchange="change()" oninput="change()">
<input id="number" type="number" value="0" min="0" max="80" step="1" oninput="changeNumber()">
<progress class="test" id="test" max="80" value="20"></progress>
这篇关于如何使用纯CSS将HTML5进度元素设置为Circle/Pie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
