Angular Javascript progressbar - show row by row - animated

Issue

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.

Solution

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)

Answered By - HOST-X