スムーズに特定の時間内に進行状況バーを表示

Question

こんにちは私はスムーズに左から右にロードするマルチグループの進行状況バーがありますが、ロードに約5秒かかります。

左から右に3秒でスムーズに読み込むにはどうすれば更新できますか？

グループバーが6つの以上のグループを持っている可能性があり、ここでは3秒

作業コードへのリンク

https://codepen.io/Nick1212/pen/WOVLaB?editors=1100

HTMLで読み込む必要があります。

<div> 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
    <div class="space"> 
    <div> Example: User earning all the points</div> 
    <div class="well-ProgressGroup"> 
     <!-- react-text: 94 --> 
     <!-- /react-text --> 
     <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation-delay: 1s; z-index: -1; height: 50px;"></div> 
     <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation-delay: 2s; z-index: -2; height: 50px;"></div> 
     <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 100%; animation-delay: 3s; z-index: -3; height: 50px;"></div> 
     <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation-delay: 4s; z-index: -4; height: 50px;"></div> 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation-delay: 5s; z-index: -5; height: 50px;"></div> 
     <!-- react-text: 101 --> 
     <!-- /react-text --> 
    </div> 
    </div> 
</div> 

はCSS：

.well-ProgressGroup { 
    display: flex; 
    background: #d3d4d5; 
    flex-direction: row; 
    border-radius: 0.5em; 
    overflow: auto; 
    position: relative; 
    z-index: 1; 
} 

@keyframes loadbar { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    transform: translateX(0); 
    opacity: 1; 
    } 
} 

.well-ProgressGroup--progress { 
    transform: translateX(-100%); 
    animation: loadbar 1s linear forwards; 
/* -webkit-animation: loadbar 1s forwards; */ 
    opacity: 0; 
    background: blue; 
} 

.well-ProgressGroup--progress:not(:last-child) { 
    border-right: 1px solid white; 
} 

.well-background--concept1 { 
    background: tomato; 
} 

.well-background--concept2 { 
    background: blue; 
} 

.well-background--concept3 { 
    background: purple; 
} 

.well-background--concept4 { 
    background: red; 
} 

.well-background--concept5 { 
    background: green; 
} 

Answer 1

.well-ProgressGroup--progress各divのアニメーション遅延は、HTML内でインラインスタイルになります。3s/5 = 0.6sのように、0, 0.6s, 1.2s, 1.8s, 2.4sの増分で更新します。その後、あなたのCSSでanimation: loadbar 1s linear forwards;を.well-ProgressGroup--progressからanimation: loadbar 0.6s linear forwards;

の間で調整します。最初の変更は、間に空白がないようにバーが連続して入るようにすることです。 2番目は、各バーがいっぱいになる速度です。 here

Answer 2

animation-delayプロパティでアニメーションの速度を遅くするには、秒数ではなくミリ秒を使用できます。そして、あなたはまた、アレックス

.well-ProgressGroup { 
 
    display: flex; 
 
    background: #d3d4d5; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.well-ProgressGroup--progress { 
 
    transform: translateX(-100%); 
 
    animation: loadbar 0.6s linear forwards; 
 
/* -webkit-animation: loadbar 1s forwards; */ 
 
    opacity: 0; 
 
    background: blue; 
 
} 
 

 
.well-ProgressGroup--progress:not(:last-child) { 
 
    border-right: 1px solid white; 
 
} 
 

 
.well-background--concept1 { 
 
    background: tomato; 
 
} 
 

 
.well-background--concept2 { 
 
    background: blue; 
 
} 
 

 
.well-background--concept3 { 
 
    background: purple; 
 
} 
 

 
.well-background--concept4 { 
 
    background: red; 
 
} 
 

 
.well-background--concept5 { 
 
    background: green; 
 
}

<div> 
 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
 
    <div class="space"> 
 
    <div> Example: User earning all the points</div> 
 
    <div class="well-ProgressGroup"> 
 
     <!-- react-text: 94 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation-delay: 600ms; z-index: -1; height: 50px;"></div> 
 
     <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation-delay: 1200ms; z-index: -2; height: 50px;"></div> 
 
     <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 100%; animation-delay: 1800ms; z-index: -3; height: 50px;"></div> 
 
     <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation-delay: 2400ms; z-index: -4; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation-delay: 3000ms; z-index: -5; height: 50px;"></div> 
 
     <!-- react-text: 101 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

で述べたように、すべての5つのアニメーションが3秒かかりますように、あなたのanimation-delayとanimation-durationを更新CSSアニメーションを変更する必要があります。

.well-ProgressGroup { 
 
    display: flex; 
 
    background: #d3d4d5; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.well-ProgressGroup--progress { 
 
    transform: translateX(-100%); 
 
    animation: loadbar 0.5s linear forwards; 
 
    opacity: 0; 
 
    background: blue; 
 
} 
 

 
.well-ProgressGroup--progress:not(:last-child) { 
 
    border-right: 1px solid white; 
 
} 
 

 
.well-background--concept1 { 
 
    background: tomato; 
 
} 
 

 
.well-background--concept2 { 
 
    background: blue; 
 
} 
 

 
.well-background--concept3 { 
 
    background: purple; 
 
} 
 

 
.well-background--concept4 { 
 
    background: red; 
 
} 
 

 
.well-background--concept5 { 
 
    background: green; 
 
}

<div> 
 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
 
    <div class="space"> 
 
    <div> Example: User earning all the points</div> 
 
    <div class="well-ProgressGroup"> 
 
     <!-- react-text: 94 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation-delay: 0.5s; z-index: -1; height: 50px;"></div> 
 
     <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation-delay: 1s; z-index: -2; height: 50px;"></div> 
 
     <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 100%; animation-delay: 1.5s; z-index: -3; height: 50px;"></div> 
 
     <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation-delay: 2s; z-index: -4; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation-delay: 2.5s; z-index: -5; height: 50px;"></div> 
 
     <!-- react-text: 101 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
</div>