html - load progress bar smoothly and within certain time -


hi have multi group progress bar loads left right smoothly takes around 5 secs load.

how can update load smoothly left right , in 3 secs?

the group bar have 6 or more groups , should load in 3 secs

here link 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 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; }  

each of .well-progressgroup--progress divs has animation delay inline style in html, update these in increments of 3s / 5 = 0.6s 0, 0.6s, 1.2s, 1.8s, 2.4s. in css adjust animation: loadbar 1s linear forwards; within .well-progressgroup--progress animation: loadbar 0.6s linear forwards;

the first change bars fill 1 after other no gaps. second speed @ each bar fills. see here


Comments

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -