CSS SVG 路径 - 圆形进度条(小修正)
CSS SVG Path - Circular Progress Bar (small ammends)
正如您将从下面的代码中看到的那样,我有一个可爱的圆形进度条,但是我有几个问题并且对如何实现它有点迷茫(理想情况下我不想使用任何 JS)
- 我想让环绕的粉红色条是弯曲的而不是
扁平化,这可能吗?就像它的边缘。所以与其成为
|开头和结尾有点像 )。
- 中间跳动的圆圈,是否可以暂停
动画在开始前完成后大约 1 秒
又是?
/* Load Progress Animation */
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
@keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
没有。 1. 可以使用 stroke-linecap
,但它需要对您的代码进行一些更改,因为在您的情况下,红线实际上是背景,而灰色是描边 - 所以它会导致凹圆,所以“(” , 而不是红线末尾的“)”。 2. 可以使用较长的动画设置为 alternate
来完成,因此它 "sleeps" 在 50% 和 100% 之间并返回。我做了一些更改:
SVG(第二个元素)的变化:
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS(请注意,dashoffset 已被反转,所以现在红色笔划增长并隐藏灰色,而不是红色缩小并显示灰色;第一个 SVG 路径上的 stroke
元素现在是灰色的。)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
动画暂停:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
我重写了整个代码。
对于您的第一个问题,您可以简单地使用 stroke-linecap="round"
。
对于第二个,您必须添加额外的 @keyframes
延迟规则。
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
@keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
@-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
正如您将从下面的代码中看到的那样,我有一个可爱的圆形进度条,但是我有几个问题并且对如何实现它有点迷茫(理想情况下我不想使用任何 JS)
- 我想让环绕的粉红色条是弯曲的而不是 扁平化,这可能吗?就像它的边缘。所以与其成为 |开头和结尾有点像 )。
- 中间跳动的圆圈,是否可以暂停 动画在开始前完成后大约 1 秒 又是?
/* Load Progress Animation */
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
@keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
没有。 1. 可以使用 stroke-linecap
,但它需要对您的代码进行一些更改,因为在您的情况下,红线实际上是背景,而灰色是描边 - 所以它会导致凹圆,所以“(” , 而不是红线末尾的“)”。 2. 可以使用较长的动画设置为 alternate
来完成,因此它 "sleeps" 在 50% 和 100% 之间并返回。我做了一些更改:
SVG(第二个元素)的变化:
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS(请注意,dashoffset 已被反转,所以现在红色笔划增长并隐藏灰色,而不是红色缩小并显示灰色;第一个 SVG 路径上的 stroke
元素现在是灰色的。)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
动画暂停:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
我重写了整个代码。
对于您的第一个问题,您可以简单地使用 stroke-linecap="round"
。
对于第二个,您必须添加额外的 @keyframes
延迟规则。
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
@keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
@-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>