### File

`src/loading/loading.component.ts`

### Description

See demo

../../iframe.html?id=loading--basic

### Metadata

selector | `ibm-loading`

template

    <div
    	[ngClass]="{
    		'bx--loading--small': size === 'sm',
    		'bx--loading--stop': !isActive && !overlay,
    		'bx--loading-overlay--stop': !isActive && overlay
    	}"
    	class="bx--loading">
    	<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
    		<title>{{title}}</title>
    		<circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
    	</svg>
    </div>

### Index

###### Inputs

- isActive
- overlay
- size
- title

### Constructor

`constructor(i18n: I18n)`
Defined in src/loading/loading.component.ts:46

Parameters :

Name | Type | Optional
i18n | `I18n` | No

### Inputs

`isActive` | set to `false` to stop the loading animation Default value : `true`
Defined in src/loading/loading.component.ts:36

`overlay` | Set to `true` to make loader with an overlay. Default value : `false`
Defined in src/loading/loading.component.ts:46

`size` | Specify the size of the button Type : `"normal" | "sm"` Default value : `"normal"`
Defined in src/loading/loading.component.ts:41

`title` | Accessible title for the loading circle. Defaults to the `LOADING.TITLE` value from the i18n service. Default value : `this.i18n.get().LOADING.TITLE`
Defined in src/loading/loading.component.ts:31

    import { Component, Input, HostBinding } from "@angular/core";
    import { I18n } from "./../i18n/i18n.module";

    /**
     * [See demo](../../?path=/story/loading--basic)
     *
     * <example-url>../../iframe.html?id=loading--basic</example-url>
     */
    @Component({
    	selector: "ibm-loading",
    	template: `
    		<div
    			[ngClass]="{
    				'bx--loading--small': size === 'sm',
    				'bx--loading--stop': !isActive && !overlay,
    				'bx--loading-overlay--stop': !isActive && overlay
    			}"
    			class="bx--loading">
    			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
    				<title>{{title}}</title>
    				<circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
    			</svg>
    		</div>
    	`
    })
    export class Loading {
    	/**
    	 * Accessible title for the loading circle.
    	 * Defaults to the `LOADING.TITLE` value from the i18n service.
    	 */
    	@Input() title = this.i18n.get().LOADING.TITLE;

    	/**
    	 * set to `false` to stop the loading animation
    	 */
    	@Input() isActive = true;

    	/**
    	 * Specify the size of the button
    	 */
    	@Input() size: "normal" | "sm" = "normal";

    	/**
    	 * Set to `true` to make loader with an overlay.
    	 */
    	@Input() @HostBinding("class.bx--loading-overlay") overlay = false;

    	constructor(protected i18n: I18n) {}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""