Componente de barra de progreso de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y arranque que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de barra de progreso en Angular MDBootstap. 

El componente Barra de progreso se utiliza para representar el progreso de cualquier tarea que se esté realizando, además de contener las diversas opciones personalizables disponibles.

Propiedades:

• max: Se utiliza para establecer el valor total máximo del elemento de progreso.
• type: se utiliza para proporcionar una de las 4 clases contextuales admitidas: `success`, `info`, `warning`, `danger`
• valor: Se utiliza para mostrar el valor actual de la barra de progreso.

Sintaxis:

<div class="progress">
    <div class="progress-bar" role="progressbar"></div>
</div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, muévase a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo: Este es el ejemplo básico que ilustra cómo usar el componente Barra de progreso en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Progress Bar Component</h4>
    <br />
    <div class="progress">
        <div class="progress-bar" 
             style="width: 30%" 
             min="0" 
             max="100">30
        </div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar" 
             style="width: 55%" 
             min="0" 
             max="100">55</div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar" 
             style="width: 80%" 
             min="0" 
             max="100">80
         </div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar" 
             style="width: 100%" 
             min="0" 
             max="100">100
        </div>
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Componente de barra de progreso de Angular MDBootstrap

Referencia: https://mdbootstrap.com/docs/angular/components/progress-bar