loading buttons

_docs/buttons.md

@@ -1,7 +1,6 @@
 ---
 title: Buttons
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-toc: true
 ---
 
 
@@ -21,6 +20,8 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 
 ### Button variations
 
+Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
+
 {% example html wrapper=btn-list %}
 {% for button in site.button-types %}
 <a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
@@ -31,6 +32,8 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 
 ### Color variations
 
+The classic button, in different colors.
+
 {% example html wrapper=btn-list %}
 {% for button in site.colors %}
 <a href="#" class="btn btn-{{ button[0] }}">{{ button[0] }}</a>
@@ -157,4 +160,16 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
     <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
   </div>
 </div>
+{% endexample %}
+
+### Loading button
+
+Add `.btn-loading` to use a loading state on a button. Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
+
+{% example html wrapper=btn-list %}
+<button type="button" class="btn btn-primary btn-loading">Button text</button>
+<button type="button" class="btn btn-success btn-loading btn-icon"><i class="fe fe-check"></i></button>
+<button type="button" class="btn btn-warning btn-loading btn-sm">Button text</button>
+<button type="button" class="btn btn-danger btn-loading btn-lg">Button text</button>
+<button type="button" class="btn btn-secondary btn-loading btn-block">Button text</button>
 {% endexample %}

_docs/charts.md

@@ -4,8 +4,6 @@ title: Charts
 
 ### c3.js charts 
 
-Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-
 {% example html columns=2 %}
 <div class="card">
 	<div class="card-header">

assets/css/dashboard.css

@@ -11396,6 +11396,42 @@ a.icon:hover {
   margin-bottom: .5rem;
 }
 
+.btn-loading {
+  color: transparent !important;
+  pointer-events: none;
+  position: relative;
+}
+
+.btn-loading:after {
+  content: '';
+  -webkit-animation: loader 500ms infinite linear;
+  animation: loader 500ms infinite linear;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  display: block;
+  height: 1.4em;
+  width: 1.4em;
+  position: absolute;
+  left: calc(50% - (1.4em / 2));
+  top: calc(50% - (1.4em / 2));
+  -webkit-transform-origin: center;
+  transform-origin: center;
+  position: absolute !important;
+}
+
+.btn-loading.btn-sm:after, .btn-group-sm > .btn-loading.btn:after {
+  height: 1em;
+  width: 1em;
+  left: calc(50% - (1em / 2));
+  top: calc(50% - (1em / 2));
+}
+
+.btn-loading.btn-secondary:after {
+  border-color: #495057;
+}
+
 .badge {
   color: #fff;
 }

assets/scss/dashboard/_button.scss

@@ -78,4 +78,38 @@
 		margin-right: .5rem;
 		margin-bottom: .5rem;
 	}
+}
+
+.btn-loading {
+	color: transparent !important;
+	pointer-events: none;
+	position: relative;
+
+	&:after {
+		content: '';
+		animation: loader 500ms infinite linear;
+		border: 2px solid #fff;
+		border-radius: 50%;
+		border-right-color: transparent !important;
+		border-top-color: transparent !important;
+		display: block;
+		height: 1.4em;
+		width: 1.4em;
+		position: absolute;
+		left: calc(50% - (1.4em / 2));
+		top: calc(50% - (1.4em / 2));
+		transform-origin: center;
+		position: absolute !important;
+	}
+
+	&.btn-sm:after{
+		height: 1em;
+		width: 1em;
+		left: calc(50% - (1em / 2));
+		top: calc(50% - (1em / 2));
+	}
+
+	&.btn-secondary:after {
+		border-color: $yiq-text-dark;
+	}
 }