Appearance

The ProgressBar enables you to set its height and width and to implement custom styling for its status indicator and label.

Setting the Dimensions

To set the styling of the ProgressBar wrapper element, use the respective CSS properties.

@Component({
    selector: 'my-app',
    template: `
      <kendo-progressbar style="width: 400px;" [value]="value"></kendo-progressbar>
    `
})
class AppComponent {
  public value = 50;
}

Customizing the Label and Status Indicator

You can customize the label and the bar that indicates the task progress by setting custom styling or custom classes to the inner elements that are responsible for their rendering. To define the custom layout, use the progressCssStyle and progressCssClass options.

import { Component } from '@angular/core';
import { LabelSettings } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
      <div id="example">
        <div class="demo-section k-content">
          <ul class="forms">
            <li>
              <label>New Password</label>
              <input type="password" #input (input)="onInput($event)" class="k-textbox" style="width: 100%;" />
            </li>
            <li>
              <label>Password strength</label>
              <div id="passStrength" style="width: 100%;"></div>
            </li>
            <li>
            <kendo-progressbar
              [style.width.%]="100"
              [emptyCssStyle]="emptyStyles"
              [progressCssStyle]="progressStyles"
              [label]="labelSettings"
              [max]="max"
              [value]="value"
            ></kendo-progressbar>
            </li>
            <li>
              <button (click)="resetPassword(input)" class="k-button k-primary">Reset Password</button>
            </li>
          </ul>
        </div>
      </div>
    `,
    styles: [`
      .forms {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

      .forms label {
        display: block;
        font-size: 12px;
        line-height: 1em;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 1em;
      }

      .forms li {
        margin-bottom: 1.5em;
      }

      #submitButton {
        width: 100%;
      }
    `]
})
export class AppComponent {
  public value = 0;
  public max = 9;
  public labelText = 'Empty';

  public progressStyles: {[key: string]: any} = {
    color: '',
    background: ''
  };

  public emptyStyles: {[key: string]: any} = {
    background: ''
  };

  public labelSettings: LabelSettings = {
    position: 'end',
    format: () => this.labelText
  };

  public onInput(e: any): void {
    this.value = e.target.value.length;

    switch (this.value) {
    case 0:
        this.updateAppearance('Empty', '', '');
        break;
    case 1:
    case 2:
    case 3:
        this.updateAppearance('Weak', '#ee9f05', 'red');
        break;
    case 4:
    case 5:
    case 6:
        this.updateAppearance('Good', '#428bca', '#428bca');
        break;
    case 7:
    case 8:
    case 9:
        this.updateAppearance('Strong', '#8EBC00', '#8EBC00');
        break;
    default:
    }
  }

  public resetPassword(inputElement: any): void {
    this.value = 0;
    inputElement.value = '';
    this.updateAppearance('Empty', '', '');
  }

  private updateAppearance(text: string, background: string, color: string): void {
    this.labelText = text;
    this.progressStyles.background = background;
    this.emptyStyles.color = color;
  }
}
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ProgressBarModule, DropDownListModule, FormsModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article