平滑地在一定时间内加载进度条

问题描述：

嗨，我有一个多组进度条，从左到右平滑加载，但大约需要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; 
}

尝试将动画时间从1秒减少到0.5秒c动画：加载栏0.5s线性向前; ' – Manjunath

答

您的每个.well-ProgressGroup--progress div在HTML中都有动画延迟内联样式，以3s/5 = 0.6s的增量更新这些样式，以便0, 0.6s, 1.2s, 1.8s, 2.4s。然后在你的CSS中调整内.well-ProgressGroup--progress到animation: loadbar 0.6s linear forwards;

第一次改变是让你的酒吧一个接一个地填充没有空白。第二个是每根钢筋填充的速度。请参阅here

谢谢AlexGriffis，我试图更新它的方式和它的工作，但我也必须更新动画的组数，以便将它作为内联属性传递，但它在css中工作时不工作。你知道为什么吗？ https://codepen.io/Nick1212/pen/WOVLaB?editors=1100 – User7354632781

'animation'是一个包含'animation-delay'的简写形式，所以如果你需要内联并且考虑传递的组数，使用像这样的动画：'动画：0.5s线性1s向前加载栏;'第一个数字是速度，第二个数字是延迟。假设您以编程方式设置样式;将速度设置为“3s/n”，将延迟设置为“i * 3s/n”，其中n是元素数量，i是元素数组中的索引。 [笔]（https://codepen.io/anon/pen/ayzYxR?editors=1100） –

试过它没有运气。但如果我正确理解它的调用加载栏是在CSS中，而不是内联。这可能是问题吗？ – User7354632781

答

您可以使用毫秒而非animation-delay属性上的秒来减慢动画速度。而且你还需要更改CSS动画作为由Alex

.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>

答

提到的更新您的animation-delay和animation-duration，让所有5个动画将采取3S：

.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>

感谢@ fen1x我试图更新它并传递内联属性，但它不工作。它可能是任何数量的组，因此也需要更改动画。 https://codepen.io/Nick1212/pen/WOVLaB?editors=1100 – User7354632781

平滑地在一定时间内加载进度条

相关推荐