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
Post a Comment