那些遇到过的问题

如何使用纯CSS将HTML5 Progress元素设置为Circle/Pie样式

tec*_*tre 21 html5 progress css3 progress-bar

HTML5引入了一个新的"progress"元素,默认情况下将其呈现为进度条(温度计).

一个非常基本的例子是:

<progress max="100" value="85"></progress>
Run Code Online (Sandbox Code Playgroud)

我一直在尝试使用javascript的各种进度圈选项,并且这里讨论的一些纯CSS方法给我留下了非常深刻的印象: CSS Progress Circle

我有兴趣知道是否有人成功地将CSS应用于"progress"元素以提供饼图/时钟/圆形渲染而不是线性显示？

EDIT/ADDENDUM:"仪表"元素也非常类似于"进度",但提供了低/高范围......我更多地提到这一点,对于未来可能偶然发现这篇文章并希望应用类似技术的人到HTML5米元素.

val*_*als 13

尝试在纯CSS中执行此操作非常困难,因此我认为这不是正确的技术.

无论如何,就像技术练习一样,让我们​​试一试.(仅在Chrome中测试过!)

首先是基础.我们将把圆圈划分为4个象限,对于每个象限,我们需要一个不同的风格.这里我们有样式,以颜色(绿色,红色,蓝色,黄色)显示进度值元素的有用范围.灰色区域是元素的其余部分,未使用.

.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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

现在,让我们展示一个创建径向段的技巧.这可以被完成,为用户设置一个正常的元素(以直角),并应用一些透视:

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;	
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

而现在,只是一些无聊的选择器(难以在20-29范围内定位值,而不是同时针对值2).

一点点JS,但只能控制进度值.您可以使用输入和滑块来更改它.

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;
}
Run Code Online (Sandbox Code Playgroud) 
.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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

溢出有困难:隐藏; 和Chrome中的错误.它不应该在应用透视的相同元素上工作,但它应该适用于进度本身.它的工作时间只有一半......

此外,另一个想法,风格更简单,我可以让它扩展到全范围,但无论如何它是一个起点:

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;
}
Run Code Online (Sandbox Code Playgroud) 
.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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

RAM*_*RAM 5

运行我的代码并查看结果

.loader {
 position: relative;
 height: 100px;
 width: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: red;
 margin:30px 30px;
 float:left;
}
.loader:before {
 content: "";
 background: white;
 position:absolute;
 z-index:100;
 width:98px;
 height:98px;
 border-radius:50%;
 margin:auto auto;
}
progress::-moz-progress-bar { background: transparent; }
progress::-webkit-progress-bar {background: transparent;}
progress::-moz-progress-value { background: red; }
progress::-webkit-progress-value { background: red; }
.circle {
 border-radius: 100%;
 overflow: hidden;
 padding:0;
}
.spin {
 animation: spin 2s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
html {
 height: 100%;
 display: flex;
}
body {
 margin: auto;
}
Run Code Online (Sandbox Code Playgroud) 
<progress max="100" value="95" class="spin circle loader"></progress>

<progress max="100" value="50" class="spin circle loader"></progress>

<progress max="100" value="10" class="spin circle loader"></progress>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

感谢@G-Cyr，我使用了他的一个答案的一部分（这里）并将其与我的解决方案混合以加快这个答案。

归档时间：

查看次数：

2085 次

最近记录：

6 年 前
CSS Progress Circle 99
是否可以在CSS(开环形状)中绘制部分圆形轮廓？ 23
更多相关链接
相关归档
我应该为JavaScript源映射文件使用什么MIME类型？ 49
HTML5 PUT/DELETE方法在Chrome中不起作用？ 26
HTML5视频/视频海报结束 23
如何只允许列入白名单的资源(脚本,像素等)在沙盒iframe中运行？ 16
如何在一个包含许多img标签的div中选择第一个img标签？ 11
如何使用Pure CSS3绘制逼真流畅的狭缝阴影？ 10
如何为Web Apps执行崩溃报告 7
为什么HTML5如此关注Javascript？ 5
滑块移动时获取滑块的价值？ 5
如何让JQuery在循环动画中循环等待 4
难疑归档
Java是"通过引用传递"还是"传递价值"？ 6270
如何有效地配对袜子？ 3850
在Git中只提交文件的一部分 2629
如何在C#中生成随机int数？ 1792
.gitignore和.gitkeep有什么区别？ 1776
使用JavaScript在下拉列表中获取选定的值？ 1660
如何为所有浏览器垂直居中div？ 1310
如何查看运行我的脚本的Python版本？ 1099
为什么人们在AWS出现时会使用Heroku？Heroku与AWS的区别是什么？ 1082
获取Oracle中所有表的列表？ 1073