CSS circle-progress-bar

Question

Ich möchte hier die Fortschrittsanzeige unter https://bootsnipp.com/snippets/featured/circle-progress-bar verwenden, aber ich weiß nicht, wie man weniger als 50% einstellt, wenn du 2, 3 oder mehr Typen hast (jeder hat einen anderen Prozentsatz) von diesen auf Ihrer Website, weil dieser Code setzt rechts von bar für jeden Typ, den Sie dort bekommen und ich weiß nicht, was ich tun soll, wenn ich weniger als 50% nur bei 3 möchte.

.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 1.8s linear forwards; 
} 

+ 

    @keyframes loading-1{ 
    0%{ 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100%{ 
     -webkit-transform: rotate(180deg); 
     transform: rotate(180deg); 
    } 

Könnte mir bitte jemand helfen?

Answer 1

Da die Animation auf der rechten Seite von allen Fortschrittskreisen geteilt wird, müssen Sie diesen generischen Stil überschreiben, wenn Sie einen mit weniger als 50% erstellen möchten. Dann brauchen Sie keine Animation auf der linken Seite.

So würde Ihre CSS so etwas wie:

.progress.yourDiv .progress-right .progress-bar { 
    animation: yourAnimation 1.8s linear forwards; 
} 
.progress.yourDiv .progress-left .progress-bar{ 
    animation: none; 
} 

Wo yourAnimation ist das gleiche wie die gemeinsamen rechtsseitigen Regel für .progress .progress-right .progress-bar im Bootstrap Beispiel, mit der Ausnahme der Name geändert wird.

Für eine Animation auf 37,5%, yourAnimation würde wie folgt aussehen:

@keyframes yourAnimation{ 
    0%{ 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100%{ 
     -webkit-transform: rotate(135deg); 
     transform: rotate(135deg); 
    } 
} 

Hier ist ein Beispiel, wo .yourDiv.yellow und yourAnimation ist loading-3 ist.

.progress { 
 
    width: 150px; 
 
    height: 150px !important; 
 
    float: left; 
 
    line-height: 150px; 
 
    background: none; 
 
    margin: 20px; 
 
    box-shadow: none; 
 
    position: relative; 
 
} 
 
.progress:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    border: 12px solid #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.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: 12px; 
 
    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 1.8s linear forwards; 
 
} 
 
.progress .progress-value { 
 
    width: 90%; 
 
    height: 90%; 
 
    border-radius: 50%; 
 
    background: #44484b; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    line-height: 135px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
} 
 
.progress.blue .progress-bar { 
 
    border-color: #049dff; 
 
} 
 
.progress.blue .progress-left .progress-bar { 
 
    animation: loading-2 1.5s linear forwards 1.8s; 
 
} 
 
.progress.yellow .progress-bar { 
 
    border-color: #fdba04; 
 
} 
 
.progress.yellow .progress-right .progress-bar { 
 
    animation: loading-3 1.8s linear forwards; 
 
} 
 
.progress.yellow .progress-left .progress-bar { 
 
    animation: none; 
 
} 
 
@keyframes loading-1 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    } 
 
} 
 
@keyframes loading-2 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(144deg); 
 
    transform: rotate(144deg); 
 
    } 
 
} 
 
@keyframes loading-3 { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
    } 
 
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 

 
<div class="progress blue"> 
 
    <span class="progress-left"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <span class="progress-right"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <div class="progress-value">90%</div> 
 
</div> 
 

 
<div class="col-md-3 col-sm-6"> 
 
    <div class="progress yellow"> 
 
    <span class="progress-left"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <span class="progress-right"> 
 
        <span class="progress-bar"></span> 
 
    </span> 
 
    <div class="progress-value">37.5%</div> 
 
    </div> 
 
</div>