Appearance

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

Setting the Dimensions

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

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

Customizing the Status Indicator

You can customize the chunks that indicate 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. To customize the empty chunks, use the emptyCssStyle and emptyCssClass options.

import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
    selector: 'my-app',
    template: `
      <div id="example">
        <div class="demo-section k-content">
            <h4>Profile Completeness: <span id="completed">{{completeness}}</span></h4>
            <kendo-chunkprogressbar
                [value]="value"
                [min]="min"
                [max]="max"
                [progressCssStyle]="progressStyle"
                [emptyCssStyle]="emptyStyle"
                [chunkCount]="chunks"></kendo-chunkprogressbar>
                <form #profileForm="ngForm">
                    <ul class="forms">
                        <li>
                            <label>First Name</label>
                            <input type="text" name="firstName" [(ngModel)]="person.firstName" class="k-textbox" style="width: 100%;" />
                        </li>
                        <li>
                            <label>Last Name</label>
                            <input type="text" name="lastName" [(ngModel)]="person.lastName" class="k-textbox" style="width: 100%;" />
                        </li>
                        <li>
                            <label>Gender</label>
                            <kendo-dropdownlist
                               [data]="genders"
                               textField="text"
                               valueField="value"
                               [valuePrimitive]="true"
                               [(ngModel)]="person.gender"
                               [defaultItem]="{text: 'Select gender', value: null}"
                               name="gender">
                            </kendo-dropdownlist>
                        </li>
                        <li>
                            <label>Occupation</label>
                            <input name="occupation" type="text" [(ngModel)]="person.occupation" class="k-textbox" style="width: 100%;" />
                        </li>
                    </ul>
                </form>
            </div>
    `,
    styles: [`
        #profileCompleteness {
            width: 100%;
        }

        .forms {
            list-style-type: none;
            padding: 2em 0 0;
            margin: 0;
            width: 50%;
        }

        .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;
        }
    `]
})
export class AppComponent implements AfterViewInit, OnDestroy {
    @ViewChild('profileForm') public form: FormGroup;
    public genders = [{
        text: 'Male',
        value: 'male'
    }, {
        text: 'Female',
        value: 'female'
    }, {
        text: 'Rather not say',
        value: 'notsay'
    }];
    public person = {
        firstName: '',
        lastName: '',
        gender: 'male',
        occupation: 'Software Developer'
    };

    public value = 2;
    public min = 0;
    public max = 4;
    public chunks = 4;

    public completeness = '50%';

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

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

    private formSubscription: Subscription;

    public ngAfterViewInit(): void {
        this.formSubscription = this.form.valueChanges.subscribe(x => {
           const completed = Object.keys(this.form.value).reduce((acc, curr) => this.form.value[curr] ? acc + 1 : acc, 0);
           this.value = completed;
           this.completeness = (completed * 25) + '%';
        });
    }

    public ngOnDestroy(): void {
        this.formSubscription.unsubscribe();
    }
}
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