0
62
ViewsBarra de progreso angular de Javascript - mostrar fila por fila - animada
Tengo datos en un archivo json. De este json produzco una barra de progreso. Busco una solución javascript/angular cargando una fila de barra de progreso tras otra. (fila por fila)
archivo json:
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, } ];el código css es el siguiente para hacer que la barra de progreso se cargue de 0 a 92 por ciento
.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%); } }El archivo HTML Anguar:
<div class="skill-progress-fill" style="--p:{{ percent }}"><span class="percentage">{{ percent }}%</span></div>¿Alguien puede ayudarme con mi problema? POR CIERTO. No estoy buscando una solución Bootstrap.
1 answers
Answer question0
Encontré el módulo de animación angular. ¿Cuál es la solución para ne.
Contenido
1.) Cree un nuevo archivo mecanografiado que se pueda compartir ampliamente -> app.animations.ts
2.) Importe BrowserAnimationsModule al módulo -> app.modules.ts
3.) Importe y defina la animación en -> app.components.ts (o el componente donde desea usar la animación)
4.) Aplicar la animación a html -> app.component.html por ejemplo.
Empecemos
1.) Cree un nuevo archivo mecanografiado con una velocidad de animación lenta (300 ms) para poder ver la animación.
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.) Importar las animaciones angulares
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserAnimationsModule }), ] })3.) Importe y defina la animación en su componente
import { listAnimation } from './app.animations'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [listAnimation], })4.) Aplique la animación a su componente html Array list -> app.component.html
<ul [@listAnimation]="jsonArray.length"> <li *ngFor="let element of jsonArray">{{element}}</li> </ul>Finalmente ver el resultado
Atención. El único objetivo es que las filas de arriba a abajo se muestren con retraso. La animación de izquierda a derecha dentro de la barra de progreso es otra solución (css puro)
