0
61
VistasAngular Javascript progressbar - show row by row - animated
I have data in a json file. From this json I produce a progressbar. I search for a javascript/angular solution loading one progressbar row after the other. (row by row)
json file:
jsonArray = [
{
text: 'Show this first',
gradue: 92,
},
{
text: 'Then show this after some millisconds',
gradue: 88,
},
{
text: 'Show this at least after some more milliseconds',
gradue: 81,
}
];
the css code is the following to make progressbar loading from 0 to 92 percent
.percentage {
color: #522003;
font-size: 10px;
font-weight: bold;
margin-right: 0.6rem;
line-height: 9px;
text-align: end;
}
@property --p {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.skill-progress-fill {
--p: 20;
background: linear-gradient(to right, #e15d10, #f07d3b);
height: 100%;
border-radius: inherit;
animation: animation 4s cubic-bezier(0.28, 1.07, 0.24, 1.01);
width: calc(var(--p) * 1%);
}
@keyframes animation {
0% {
width: 0%;
}
100% {
width: calc(var(--p) * 1%);
}
}
The Anguar HTML file:
<div class="skill-progress-fill" style="--p:{{ percent }}"><span class="percentage">{{ percent }}%</span></div>
Can anybody help for my problem. BTW. I am not searching for a Bootstrap solution.
1 Respuestas
Responde la pregunta0
I found the angular animation module. Which is the solution for ne.
Content
1.) Create a new typescript file which is wide sharable -> app.animations.ts
2.) Import the BrowserAnimationsModule to the module -> app.modules.ts
3.) Import and define the animation in -> app.components.ts (or the component where you wanna use the animation)
4.) Apply the animation to html -> app.component.html for example.
Let's Start
1.) Create a new typescript file with a slow animation speed (300ms) inorder to see the animation.
import {
trigger,
transition,
style,
animate,
query,
stagger,
} from '@angular/animations';
export const listAnimation = trigger('listAnimation', [
transition('* <=> *', [
query(
':enter',
[
style({ opacity: 0 }),
stagger('300ms', animate('3000ms ease-out', style({ opacity: 1 }))),
],
{ optional: true }
),
query(':leave', animate('300ms', style({ opacity: 0 })), {
optional: true,
}),
]),
]);
2.) Import the Angular animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
}),
]
})
3.) Import and define the animation in your component
import { listAnimation } from './app.animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [listAnimation],
})
4.) Apply the animation to your component html Array list -> app.component.html
<ul [@listAnimation]="jsonArray.length">
<li *ngFor="let element of jsonArray">{{element}}</li>
</ul>
Finally see the result
Attention. The goal is only, that the rows from top to bottom will be shown time-delayed. The animation from left to right within the progressbar is another solution (pure css)
