### File

`src/inline-loading/inline-loading.component.ts`

### Description

See demo

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

### Metadata

selector | `ibm-inline-loading`
template |
    <div class="bx--inline-loading__animation">
    	<div
    		*ngIf="success === false"
    		class="bx--loading bx--loading--small"
    		[ngClass]="{
    			'bx--loading--stop': !isActive
    		}">
    		<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
    			<circle class="bx--loading__background" cx="0" cy="0" r="30" />
    			<circle class="bx--loading__stroke" cx="0" cy="0" r="30" />
    		</svg>
    	</div>
    	<svg
    		*ngIf="success === true"
    		class="bx--inline-loading__checkmark-container bx--inline-loading__svg"
    		xmlns="http://www.w3.org/2000/svg"
    		viewBox="0 0 10 10">
    		<polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
    	</svg>
    </div>
    <p *ngIf="success === false" class="bx--inline-loading__text">{{loadingText}}</p>
    <p *ngIf="success === true" class="bx--inline-loading__text">{{successText}}</p>

### Index

###### Properties
Protected _success
###### Inputs
isActive loadingText success successDelay successText
###### Outputs
onSuccess
###### HostBindings
class.bx--inline-loading
###### Accessors
success

### Inputs

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

`loadingText` | Specify the text description for the loading state.
Defined in src/inline-loading/inline-loading.component.ts:45

`success` | Returns value `true` if the component is in the success state.
Defined in src/inline-loading/inline-loading.component.ts:62

`successDelay` | Provide a delay for the `setTimeout` for success. Default value : `1500`
Defined in src/inline-loading/inline-loading.component.ts:53

`successText` | Specify the text description for the success state.
Defined in src/inline-loading/inline-loading.component.ts:49

### Outputs

`onSuccess` | Emits event after the success state is active `$event` Type: `EventEmitter<any>`
Defined in src/inline-loading/inline-loading.component.ts:80

### HostBindings

class.bx--inline-loading
`class.bx--inline-loading: ```
Default value : `true`
Defined in src/inline-loading/inline-loading.component.ts:82

### Properties

Protected _success
`_success: ```
Default value : `false`
Defined in src/inline-loading/inline-loading.component.ts:87
Set to `true` if the action is completed successfully.

### Accessors

success
set `success(success: boolean)`
Defined in src/inline-loading/inline-loading.component.ts:68
Set the component's state to match the parameter and emits onSuccess if it exits. Parameters :
Name | Type | Optional
success | `boolean` | No
Returns : `void`

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding
    } from "@angular/core";

    /**
     * [See demo](../../?path=/story/inline-loading--basic)
     *
     * <example-url>../../iframe.html?id=inline-loading--basic</example-url>
     */
    @Component({
    	selector: "ibm-inline-loading",
    	template: `
    		<div class="bx--inline-loading__animation">
    			<div
    				*ngIf="success === false"
    				class="bx--loading bx--loading--small"
    				[ngClass]="{
    					'bx--loading--stop': !isActive
    				}">
    				<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
    					<circle class="bx--loading__background" cx="0" cy="0" r="30" />
    					<circle class="bx--loading__stroke" cx="0" cy="0" r="30" />
    				</svg>
    			</div>
    			<svg
    				*ngIf="success === true"
    				class="bx--inline-loading__checkmark-container bx--inline-loading__svg"
    				xmlns="http://www.w3.org/2000/svg"
    				viewBox="0 0 10 10">
    				<polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
    			</svg>
    		</div>
    		<p *ngIf="success === false" class="bx--inline-loading__text">{{loadingText}}</p>
    		<p *ngIf="success === true" class="bx--inline-loading__text">{{successText}}</p>
    	`
    })
    export class InlineLoading {
    	/**
    	 * Specify the text description for the loading state.
    	 */
    	@Input() loadingText;
    	/**
    	 * Specify the text description for the success state.
    	 */
    	@Input() successText;
    	/**
    	 * Provide a delay for the `setTimeout` for success.
    	 */
    	@Input() successDelay = 1500;
    	/**
    	 * set to `false` to stop the loading animation
    	 */
    	@Input() isActive = true;

    	/**
    	 * Returns value `true` if the component is in the success state.
    	 */
    	@Input() get success() {
    		return this._success;
    	}
    	/**
    	 * Set the component's state to match the parameter and emits onSuccess if it exits.
    	 */
    	set success (success: boolean) {
    		this._success = success;
    		if (this._success) {
    			setTimeout(() => {
    				this.onSuccess.emit();
    			}, this.successDelay);
    		}
    	}

    	/**
    	 * Emits event after the success state is active
    	 */
    	@Output() onSuccess: EventEmitter<any> = new EventEmitter();

    	@HostBinding("class.bx--inline-loading") loadingClass = true;

    	/**
    	 * Set to `true` if the action is completed successfully.
    	 */
    	protected _success = false;
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""