User7354632781 User7354632781 - 3 years ago 111
CSS Question

load progress bar smoothly and within certain time

Hi I have a multi group progress bar that loads from left to right smoothly but it takes around 5 secs to load.

How can i update it to load smoothly from left to right and in 3 secs?

The group bar could have 6 or more groups and should load in 3 secs

Here the link to working code

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 Source

Each of your .well-ProgressGroup--progress divs has an animation delay inline style in the HTML, update these in increments of 3s / 5 = 0.6s so 0, 0.6s, 1.2s, 1.8s, 2.4s. Then in your CSS adjust the animation: loadbar 1s linear forwards; within .well-ProgressGroup--progress to animation: loadbar 0.6s linear forwards;

The first change is so that your bars fill one after the other with no gaps. The second is the speed at which each bar fills. See here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download