如何从左到右为圆形进度栏设置动画? [英] How I can animate circular progress bar from left to right?
本文介绍了如何从左到右为圆形进度栏设置动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个圆形进度条，仅适用于HTML和CSS，我使用关键帧进行加载(动画).但是负载是从右到左，我想将其反转.我编辑我的CSS关键帧，但是什么也没有.我也尝试动画再反转一无所有.
I have a circle progress bar, only with HTML and CSS, I used keyframes for loading (animation). But the loading is from right to left I wanna reverse it. I edit my CSS keyframes but nothing at all. I try also animation reverse again nothing.
提琴: https://jsfiddle.net/d20wu8e4/
我的结果(图片): https://ibb.co/0KCSsZY
My Result (image): https://ibb.co/0KCSsZY
我想要什么: https://ibb.co/MGCpHqS
* {
box-sizing:border-box;
}
.progress {
width: 150px;
height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 2px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading 1.8s linear forwards;
}
.progress .progress-value {
width: 79%;
height: 79%;
border-radius: 50%;
background: none;
font-size: 24px;
color: black;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.one .progress-bar {
border-color: black;
}
.progress.one .progress-left .progress-bar {
animation: loading-1 1s linear forwards 1.8s;
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<div class="container bg-danger">
<div class="row mt-5">
<div class="progress one">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right ">
<span class="progress-bar"></span>
</span>
<div class="progress-value">73%</div>
</div>
</div>
</div>
推荐答案
我评论过，简单的解决方案是旋转整个动画:
As I commented, the trivial solution is to rotate the whole animation:
* {
box-sizing:border-box;
}
.progress {
width: 150px;
height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
transform: scaleX(-1);
}
.progress-value {
transform: scaleX(-1);
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 2px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading 1.8s linear forwards;
}
.progress .progress-value {
width: 79%;
height: 79%;
border-radius: 50%;
background: none;
font-size: 24px;
color: black;
line-height: 135px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.one .progress-bar {
border-color: black;
}
.progress.one .progress-left .progress-bar {
animation: loading-1 1s linear forwards 1.8s;
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<div class="progress one">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right ">
<span class="progress-bar"></span>
</span>
<div class="progress-value">73%</div>
</div>
顺便说一句，这是依赖更少代码的另一个想法.诀窍是考虑clip-path，您将在其中调整不同点的位置以创建所需的动画
By the way here is another idea that rely on less code. The trick is to consider clip-path where you will adjust the position of the different points in order to create the needed animation
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 2s linear forwards;
}
@keyframes change {
25% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
50% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
75% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0, 0% 0%);
}
}
body {
background:pink;
}
<div class="box">
73%
</div>
要更好地理解动画，请添加背景并删除半径.我们基本上在多边形中有6个点，其中2个是固定的(中心(50% 50%)和顶部一个(0 0))，然后我们将其他4个点移动到角落.诀窍是将它们一起移动，然后在每个角处保留一个(动画的每个状态).
To better understand the animation, add background and remove the radius. We basically have 6 points in the polygon where 2 are fixed (the center (50% 50%) and top one (0 0)) then we move the 4 others to put them in the corners. The trick is to move them together and we leave one at each corner (each state of the animation).
.box {
width:100px;
height:100px;
margin:50px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
background:rgba(0,0,0,0.5);
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
background:red;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 5s linear forwards;
}
@keyframes change {
25% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
50% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
75% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0, 0% 0%);
}
}
body {
background:pink;
}
<div class="box">
73%
</div>
使用此代码，您可以获得完整的动画，只需调整最终状态或删除某些状态即可将其停止在所需的位置.
With this code you have the full animation, simply adjust the final state or remove some states to stop it where you want.
Ex达到75％(我们删除了最后一个状态)
Ex with 75% (we remove the last state)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 3s linear forwards;
}
@keyframes change {
33% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
66% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 0);
}
}
body {
background:pink;
}
<div class="box">
75%
</div>
使用66％(我们删除最后一个状态，然后更改第三个状态的百分比)
With 66% (we remove the last state and we change the percentage of the third one)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 2s linear forwards;
}
@keyframes change {
33% {
clip-path:polygon(50% 50%,0 0, 0 100%,0 100%,0 100%,0 100%);
}
66% {
clip-path:polygon(50% 50%,0 0,0 100%, 100% 100%, 100% 100%,100% 100%);
}
100% {
clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,100% 40%);
}
}
<div class="box">
75%
</div>
具有10％(仅一种状态)
with 10% (only one state)
.box {
width:150px;
height:150px;
margin:20px;
box-sizing:border-box;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:5px solid #000;
border-radius:50%;
transform:rotate(45deg);
clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
animation:change 1s linear forwards;
}
@keyframes change {
100% {
clip-path:polygon(50% 50%,0 0, 0 40%,0 40%,0 40%,0 40%);
}
}
body {
background:pink;
}
<div class="box">
10%
</div>
这篇关于如何从左到右为圆形进度栏设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
