feat(Loading): Add active/inactive states

Author: youda97

src/loading/loading.component.ts

@@ -5,7 +5,11 @@ import { I18n } from "./../i18n/i18n.module";
 	selector: "ibm-loading",
 	template: `
 		<div
-			[ngClass]="{'bx--loading--small': size === 'sm'}"
+			[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>
@@ -21,17 +25,21 @@ export class Loading {
 	 */
 	@Input() title = this.i18n.get().LOADING.TITLE;
 
+	/**
+	 * set to `false` to stop the loading animation
+	 * @type {boolean}
+	 */
+	@Input() isActive = true;
+
 	/**
 	 * Specify the size of the button
 	 * @type {("normal" | "sm")}
-	 * @memberof Loading
 	 */
 	@Input() size: "normal" | "sm" = "normal";
 
 	/**
 	 * Set to `true` to make loader with an overlay.
 	 * @type {boolean}
-	 * @memberof Loading
 	 */
 	@Input() @HostBinding("class.bx--loading-overlay") overlay = false;
 

src/loading/loading.stories.ts

@@ -12,9 +12,10 @@ storiesOf("Loading", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<ibm-loading [size]="size" [overlay]="overlay"></ibm-loading>
+		<ibm-loading [isActive]="isActive" [size]="size" [overlay]="overlay"></ibm-loading>
 	`,
 		props: {
+			isActive: boolean("Active", true),
 			overlay: boolean("With overlay", false),
 			size: select("Size of the loading circle", ["normal", "sm"], "normal")
 		}