Getting Started with Kendo UI for Angular Loader

The Loader component is a visual indicator that expresses an indeterminate wait time. It informs users about the status of ongoing processes, such as loading an app, submitting a form, saving updates or fetching data.

Basic Usage

The following example demonstrates the Loader in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <div class="wrap">
                <div class="example-item" *ngFor="let loader of loaders">
                    <div class="example-item-title">{{ loader.type | titlecase }}</div>
                    <div class="k-block">
                        <kendo-loader
                            [type]="loader.type"
                            [themeColor]="loader.themeColor"
                            [size]="loader.size"
                        >
                        </kendo-loader>
                    </div>
                </div>
            </div>
        </div>
    `,
    styles: [`
        .wrap {
            display: flex;
            align-items: center;
            margin: 0 -10px;
        }
        .example-item {
            flex: 0 0 33%;
            padding: 10px;
        }
        .example-item-title {
            margin-bottom: 10px;
            text-align: center;
        }
        .k-block {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 80px;
        }
    `]
})
export class AppComponent {
    public loaders = [
        {
            type: 'pulsing',
            themeColor: 'primary',
            size: 'medium'
        },
        {
            type: 'infinite-spinner',
            themeColor: 'secondary',
            size: 'medium'
        },
        {
            type: 'converging-spinner',
            themeColor: 'info',
            size: 'medium'
        }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';

import { AppComponent } from './app.component';

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

enableProdMode();

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

Functionality and Features

In this article