added inline spinner as requested by mayadata-io#137 and added missin…

…g loader import in product.scss
arkajyotiMukherjee · May 5, 2020 · 8e73693 · 8e73693
1 parent cf9375a
commit 8e73693
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 85 deletions.
diff --git a/docs/products/loader.mdx b/docs/products/loader.mdx
@@ -36,3 +36,11 @@ import { Playground, PropsTable } from 'docz'
     <i class="dci dci-loader mi-spin dci-2x"></i>
 </span>
 </Playground>
+
+### Inline loader
+
+<Playground>
+<div class="inline-loading-container">
+    <div class="loader inline"></div>
+</div>
+</Playground>
diff --git a/scss/_product.scss b/scss/_product.scss
@@ -30,3 +30,4 @@
 @import "product/components/segment-controls";
 @import "product/components/chooser";
 @import "product/components/drawer";
+@import "product/components/loader";
diff --git a/scss/product/components/_loader.scss b/scss/product/components/_loader.scss
@@ -1,87 +1,100 @@
 /**LOADER**/
 .loading-container {
-    border-radius: 4%;
-    padding: 20px;
-    width: 100px;
-  }
-
-  .loader {
-    border: $loader-border;
-    border-radius: 50%;
-    border-top: $loader-border-top;
-    width: $loader-width;
-    height: $loader-height;
-    -webkit-animation: spin 1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-    animation: spin 1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-
-    &.loader-pause {
-      animation: none;
-    }
-
-    &.loader-xl {
-      border: 6px solid $gray-000;
-      border-top: 6px solid $primary;
-      width: 84px;
-      height: 84px;
-    }
-  }
-  .iframe-loader {
-    position: absolute;
-    left: 50%;
-    top: 40%;
-  }
-  @-webkit-keyframes spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-    }
-
-    100% {
-      -webkit-transform: rotate(360deg);
-    }
-  }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  .loading-overlay {
-    position: absolute;
-    top: 50vh;
-    left: 0;
-    right: 0;
-    z-index: 13;
-  }
-
-  // Loader icon
-  .mi-spin {
-    -webkit-animation: mi-spin 2s infinite linear;
-    animation: mi-spin 2s infinite linear;
-    display: inline-block;
-  }
-  @-webkit-keyframes mi-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
-  }
-  @keyframes mi-spin {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-
-    100% {
-      -webkit-transform: rotate(359deg);
-      transform: rotate(359deg);
-    }
-  }
+	border-radius: 4%;
+	padding: 20px;
+	width: 100px;
+}
+
+.inline-loading-container {
+	display: inline-flex;
+	justify-content: center;
+	padding: 0 20px;
+}
+
+.loader {
+	border: $loader-border;
+	border-radius: 50%;
+	border-top: $loader-border-top;
+	width: $loader-width;
+	height: $loader-height;
+	-webkit-animation: spin 1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+	animation: spin 1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+
+	&.loader-pause {
+		animation: none;
+	}
+
+	&.loader-xl {
+		border: 6px solid $gray-000;
+		border-top: 6px solid $primary;
+		width: 84px;
+		height: 84px;
+	}
+
+	// Inline loader
+	&.inline {
+		width: 1.5rem;
+		height: 1.5rem;
+		display: inline-block;
+	}
+}
+.iframe-loader {
+	position: absolute;
+	left: 50%;
+	top: 40%;
+}
+@-webkit-keyframes spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+	}
+}
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.loading-overlay {
+	position: absolute;
+	top: 50vh;
+	left: 0;
+	right: 0;
+	z-index: 13;
+}
+
+// Loader icon
+.mi-spin {
+	-webkit-animation: mi-spin 2s infinite linear;
+	animation: mi-spin 2s infinite linear;
+	display: inline-block;
+}
+@-webkit-keyframes mi-spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
+@keyframes mi-spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}