圆形进度条css
circle progress bar css
我想创建一个圆条,笔划会随着它的进行而变粗。
是否可以在 ionic 移动应用程序上使用 css 或可以 运行 的 svg。
这是我想要实现的目标:
这里是 fiddle 的起点:
.wrap {
background: #0b1626;
padding: 2em;
color: #FFF;
font-family: 'Arial Black';
}
.knob {
position: relative;
margin: 0 auto;
padding: 1.5em;
width: 220px;
height: 220px;
border-radius: 50%;
border: 1px solid #e84d51;
}
.knob .val {
padding-top: 1em;
font-size: 28px;
text-align: center;
}
<div class="wrap">
<div class="knob">
<div class="stats">
<p class="val">16,858<br>1,285</p>
</div>
</div>
</div>
这是我的尝试。有很多 div,但我没有时间尝试减少它们。
基本上,它会在一个圆圈和另一个圆圈之间进行偏移。
.container {
width: 400px;
height: 400px;
position: relative;
background-color: black;
}
.left {
position: absolute;
width: 50%;
height: 100%;
right: 0px;
overflow: hidden;
}
.moving {
animation: rotatel 8s 1s linear forwards; /* to keep both animations the same */
}
.left .moving {
position: absolute;
width: calc(200% - 70px);
height: calc(100% - 70px);
right: 15px;
top: 20px;
border: 20px solid transparent;
border-top-color: red;
border-right-color: red;
border-radius: 50%;
transform: rotate(-135deg);
}
@keyframes rotatel {
from {transform: rotate(-135deg);}
50%, 100% {transform: rotate(45deg);}
}
.right {
position: absolute;
width: 50%;
height: 100%;
left: 0px;
overflow: hidden;
}
.right .moving {
position: absolute;
width: calc(200% - 50px);
height: calc(100% - 50px);
left: 10px;
top: 0px;
border: 20px solid transparent;
border-top-color: red;
border-right-color: red;
border-radius: 50%;
transform: rotate(45deg);
animation-name: rotater;
}
@keyframes rotater {
0%, 50% {transform: rotate(45deg);}
100% {transform: rotate(225deg);}
}
.inner {
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background-color: white;
left: 20px;
top: 20px;
border: red solid 1px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="moving"></div>
</div>
<div class="right">
<div class="moving"></div>
</div>
<div class="inner"></div>
</div>
顺便说一句,关于在 div 中使用边框和伪元素
实现基本形状的示例
.test1 {
width: 400px;
height: 400px;
border: 1px solid red;
border-top-width: 1px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-radius: 50%;
position: relative;
margin: 40px;
}
.test1:after {
content: "";
position: absolute;
width: 50%;
height: 50%;
border: 0px solid green;
border-left-width: 30px;
border-top-width: 40px;
border-radius: 100% 0px 0px 0px;
position: absolute;
top: -40px;
left: -30px;
}
<div class="test1"></div>
进度条尝试使用这行代码
@keyframes growProgressBar {
0%, 33% { --pgPercentage: 0; }
100% { --pgPercentage: var(--value); }
}
@property --pgPercentage {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
div[role="progressbar"] {
--size: 12rem;
--fg: #f00;
--bg: #def;
--pgPercentage: var(--value);
animation: growProgressBar 3s 1 forwards;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
conic-gradient(var(--fg) calc(var(--pgPercentage) * 10%), var(--bg) 0)
;
font-family: Helvetica, Arial, sans-serif;
font-size: calc(var(--size) / 5);
color: var(--fg);
}
div[role="progressbar"]::before {
counter-reset: percentage var(--value);
content: counter(percentage) '/10';
}
/* demo */
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="--value:8"></div>
我想创建一个圆条,笔划会随着它的进行而变粗。
是否可以在 ionic 移动应用程序上使用 css 或可以 运行 的 svg。
这是我想要实现的目标:
这里是 fiddle 的起点:
.wrap {
background: #0b1626;
padding: 2em;
color: #FFF;
font-family: 'Arial Black';
}
.knob {
position: relative;
margin: 0 auto;
padding: 1.5em;
width: 220px;
height: 220px;
border-radius: 50%;
border: 1px solid #e84d51;
}
.knob .val {
padding-top: 1em;
font-size: 28px;
text-align: center;
}
<div class="wrap">
<div class="knob">
<div class="stats">
<p class="val">16,858<br>1,285</p>
</div>
</div>
</div>
这是我的尝试。有很多 div,但我没有时间尝试减少它们。
基本上,它会在一个圆圈和另一个圆圈之间进行偏移。
.container {
width: 400px;
height: 400px;
position: relative;
background-color: black;
}
.left {
position: absolute;
width: 50%;
height: 100%;
right: 0px;
overflow: hidden;
}
.moving {
animation: rotatel 8s 1s linear forwards; /* to keep both animations the same */
}
.left .moving {
position: absolute;
width: calc(200% - 70px);
height: calc(100% - 70px);
right: 15px;
top: 20px;
border: 20px solid transparent;
border-top-color: red;
border-right-color: red;
border-radius: 50%;
transform: rotate(-135deg);
}
@keyframes rotatel {
from {transform: rotate(-135deg);}
50%, 100% {transform: rotate(45deg);}
}
.right {
position: absolute;
width: 50%;
height: 100%;
left: 0px;
overflow: hidden;
}
.right .moving {
position: absolute;
width: calc(200% - 50px);
height: calc(100% - 50px);
left: 10px;
top: 0px;
border: 20px solid transparent;
border-top-color: red;
border-right-color: red;
border-radius: 50%;
transform: rotate(45deg);
animation-name: rotater;
}
@keyframes rotater {
0%, 50% {transform: rotate(45deg);}
100% {transform: rotate(225deg);}
}
.inner {
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background-color: white;
left: 20px;
top: 20px;
border: red solid 1px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="moving"></div>
</div>
<div class="right">
<div class="moving"></div>
</div>
<div class="inner"></div>
</div>
顺便说一句,关于在 div 中使用边框和伪元素
实现基本形状的示例.test1 {
width: 400px;
height: 400px;
border: 1px solid red;
border-top-width: 1px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-radius: 50%;
position: relative;
margin: 40px;
}
.test1:after {
content: "";
position: absolute;
width: 50%;
height: 50%;
border: 0px solid green;
border-left-width: 30px;
border-top-width: 40px;
border-radius: 100% 0px 0px 0px;
position: absolute;
top: -40px;
left: -30px;
}
<div class="test1"></div>
进度条尝试使用这行代码
@keyframes growProgressBar {
0%, 33% { --pgPercentage: 0; }
100% { --pgPercentage: var(--value); }
}
@property --pgPercentage {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
div[role="progressbar"] {
--size: 12rem;
--fg: #f00;
--bg: #def;
--pgPercentage: var(--value);
animation: growProgressBar 3s 1 forwards;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
conic-gradient(var(--fg) calc(var(--pgPercentage) * 10%), var(--bg) 0)
;
font-family: Helvetica, Arial, sans-serif;
font-size: calc(var(--size) / 5);
color: var(--fg);
}
div[role="progressbar"]::before {
counter-reset: percentage var(--value);
content: counter(percentage) '/10';
}
/* demo */
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="--value:8"></div>