.wrapper {
width: 100px; /* Set the size of the progress bar */
height: 100px;
position: absolute; /* Enable clipping */
clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
width: 80px;
height: 80px;
border: 10px solid green;
border-radius: 50px;
position: absolute;
clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
-webkit-animation-iteration-count: 1; /* Only run once */
-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
-webkit-animation-timing-function:linear; /* Linear animation */
}
.wrapper[data-anim~=wrapper] {
-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
-webkit-animation-delay: 3s; /* Wait half of the animation */
-webkit-animation-name: close-wrapper; /* Keyframes name */
}
.circle[data-anim~=left] {
-webkit-animation-duration: 6s; /* Full animation time */
-webkit-animation-name: left-spin;
}
.circle[data-anim~=right] {
-webkit-animation-duration: 3s; /* Half animation time */
-webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
to {
clip: rect(auto, auto, auto, auto);
}
}
8条答案
按热度按时间kqlmhetl1#
我用only CSS创建了一个小提琴。
也检查这个fiddle here(仅CSS)
一个二个一个一个
或者这个美丽的round progress bar与HTML5,CSS3和JavaScript。
ia2d9nvy2#
那又怎么样?
HTML
简体中文
和CSS
https://jsfiddle.net/4a90uyo1/
基本代码取自Simple PIE Chart http://rendro.github.io/easy-pie-chart/
mv1qrgav3#
看看这个:)
我用conic-gradient做了这个。
您可以使用圆锥渐变创建饼图。
我只为饼图选择两种颜色。
然后在饼图的顶部放置一个div,使其看起来像一个圆形的进度指示器。然后使用HTML DOM innerHTML选项设置进度。
然后,您可以使用incrementProgress()和decrementProgress()函数来动态更改进度。
按照我完整的例子来得到一些想法:)
您可以使用此工具制作上传/下载进度指示器、 Jmeter 板图表等。
laximzn54#
另一个基于纯CSS的解决方案是基于两个裁剪的圆形元素,我旋转它们以获得正确的Angular :
http://jsfiddle.net/maayan/byT76/
这就是启用它的基本CSS:
并且JS根据需要旋转它。
很容易理解。
希望能帮上忙Maayan
y3bcpkx15#
一种只使用一个元素和几个属性的极简方法:
使用
data-progress
定义内部标签,使用--progress
定义从0deg
到360deg
的进度。x一个一个一个一个x一个一个二个x
这里有一个简单的动画方法,同样是所有的CSS,没有JS,只有一个元素:
一个三个三个一个
免责声明:交叉浏览未经测试。
kupeojn66#
新
@property
的不同想法。See the support table我看到了一个更强大的例子,Alvaro Montoro。一定要看看这个。
bn31dyow7#
加入你的数据,你可以改变像
<div ... data-num="50">
输出50%
的过程,去显示完全动画的圆圈和数字.data-num="/* 0-100 */"
的变化。5,10
。Javascript
、CSS
、Html
以及动画circle
和number
。Output
Code
bweufnob8#
用于径向进度条的灵活SVG解决方案(仅限CSS):SVG内部圆的边长计算(通过calc)的解决方案。
进度-样本中的圆圈覆盖在元素上,并且可以是透明的。