Complete spinner module

docs/v2/DEVLOG.md

@@ -333,3 +333,7 @@
 - Added a small section about `tab`s and `carousel`s, just to allow me to test presentation a bit more.
 - Deployed demo page with `accordion` demo.
 - Added `mini-shell/tab` and `mini-shell/spinner` for the `tab` and `spinner` modules accordingly.
+- Created `spinner-dot` class and custom-tailored the `spinner` for that. *NOTE* This spinner does not work perfectly fine with many elements, some tweaking might be required.
+- Created `spinner-donut` class and made styling for that `spinner`.
+- Added mixin `make-spinner-donut-alt-color` to allow for custom `spinner` styles. No optimizations are applied to this mixin, due to the fact that overwriting the background might cause trouble with the foreground etc.
+- Optimized and softcoded most of the `spinner` module's stuff.

docs/v2/index.html

@@ -485,6 +485,14 @@
             <div><h4>Demo</h4> <p>This is the second piece of the accordion. Notice how these samples use <code>&lt;div&gt;</code> to display more complex content.</p></div>
             <h3>Tabs &amp; Carousels</h3>
             <p>Tabbed navigation is a very common element for many websites and single page apps. <strong>mini.css</strong> supports both of these elements using one generic component. More coming soon...</p>
+
+            <h2>Spinners<small>Loading with style</small></h2>
+            <p>Finally, <strong>mini.css</strong> provides you with a couple of spinner variations, <code>.spinner-dot</code> and <code>.spinner-donut</code>. Simply apply these to a <code>&lt;div&gt;</code> and you are ready to go. Both are showcased below:</p>
+            <p>This is some text with a <code>.spinner-dot</code> spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this <span class="spinner-dot"></span></p>
+            <p>And this here is a <code>.spinner-donut</code> spinner. It is more versatile and it can also use a couple of variants like <code>.secondary</code> and <code>.tertiary</code>, as shown below:</p>
+            <div class="spinner-donut"></div>
+            <div class="spinner-donut secondary"></div>
+            <div class="spinner-donut tertiary"></div>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -872,6 +872,44 @@ progress {
     padding: 6px 10px 8px;
     margin-bottom: 2px; }
 
+@-webkit-keyframes spinner-dot-anim {
+  to {
+    -webkit-transform: translateY(-6em); } }
+@keyframes spinner-dot-anim {
+  to {
+    transform: translateY(-6em); } }
+@-webkit-keyframes spinner-donut-anim {
+  0% {
+    -webkit-transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(360deg); } }
+@keyframes spinner-donut-anim {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
+.spinner-dot {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 1em;
+  height: 1.5em;
+  vertical-align: bottom; }
+  .spinner-dot:after {
+    display: inline-table;
+    white-space: pre;
+    content: "\A.\A..\A...";
+    -webkit-animation: spinner-dot-anim 1.2s steps(4) infinite;
+    animation: spinner-dot-anim 1.2s steps(4) infinite; }
+
+.spinner-donut {
+  display: inline-block;
+  border: 4px solid #e3f2fd;
+  border-left: 4px solid #1565c0;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spinner-donut-anim 1.2s linear infinite; }
+
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary {
   background: #1565c0;
@@ -1038,3 +1076,16 @@ ul.breadcrumbs {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-around;
   justify-content: space-around; }
+
+.spinner-donut.secondary {
+  border: 4px solid #ffebee;
+  border-left: 4px solid #c62828; }
+
+.row.cards {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-around;
+  justify-content: space-around; }
+
+.spinner-donut.tertiary {
+  border: 4px solid #e8f5e9;
+  border-left: 4px solid #2e7d32; }

flavors/v2/mini-default.scss

@@ -359,6 +359,26 @@ $accordion-border-radius:		2px;											// Border radius for accordion
 $accordion-margin-bottom:		2px;											// Bottom margin for accordion
 $accordion-separator-border-style:												// Border style for the accordion's separators
 								1px solid #bdbdbd;								// (border between label and content)
+//	Variables for tabs
+
+//	Variables for spinners
+$spinner-dot-name:				'spinner-dot';									// Class name for dot spinner
+$spinner-dot-font-size:			1em;											// Font size for dot spinner
+$spinner-donut-name:			'spinner-donut';								// Class name for donut spinner
+$spinner-donut-border-thickness:4px;											// Border thickness for donut spinner
+$spinner-donut-back-color:		#e3f2fd;										// Background color for donut spinner
+$spinner-donut-fore-color:		#1565c0;										// Foreground color for donut spinner
+$spinner-donut-size:			20px;											// Size for donut spinner
+$spinner-donut-variant1-name:	'secondary';									// Class name for donut spinner variant 1
+$spinner-donut-variant1-back-color:												// Background color for donut spinner variant 1
+								#ffebee;
+$spinner-donut-variant1-fore-color:												// Foreground color for donut spinner variant 1
+								#c62828;	
+$spinner-donut-variant2-name:	'tertiary';										// Class name for donut spinner variant 2
+$spinner-donut-variant2-back-color:												// Background color for donut spinner variant 2
+								#e8f5e9;
+$spinner-donut-variant2-fore-color:												// Foreground color for donut spinner variant 2
+								#2e7d32;	
 //	Enable mini.css
 @import '../../scss/v2/mini';
 //	Use mixins for button elements
@@ -409,4 +429,9 @@ $accordion-separator-border-style:												// Border style for the accordion'
 @include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, 
 	$card-section-style2-fore-color);
 @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
-@include add-grid-row-cards-alignment;
+@include add-grid-row-cards-alignment;
+@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color, 
+	$spinner-donut-variant1-fore-color);
+@include add-grid-row-cards-alignment;
+@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color, 
+	$spinner-donut-variant2-fore-color);

scss/v2/mini-shell/_spinner.scss

@@ -1 +1,42 @@
-// Definitions for spinners.
+// Definitions for spinners.
+// Animation definitions
+@-webkit-keyframes spinner-dot-anim { to { 	-webkit-transform: translateY(-($spinner-dot-font-size*6));} }
+		@keyframes spinner-dot-anim { to {			transform: translateY(-($spinner-dot-font-size*6));} }
+@-webkit-keyframes spinner-donut-anim { 0% { 	-webkit-transform: rotate(0deg);} 100% { 	-webkit-transform: rotate(360deg);} }
+		@keyframes spinner-donut-anim { 0% {			transform: rotate(0deg);} 100% {			transform: rotate(360deg);} }
+// Style for dots spinner (simple text-based spinner)
+.#{$spinner-dot-name} {
+	display: inline-block;
+	overflow: hidden;
+	font-size: $spinner-dot-font-size;
+	height: 1.5 * $spinner-dot-font-size;
+	vertical-align: bottom;
+&:after{
+	display: inline-table;
+	white-space: pre;
+	content: "\A.\A..\A...";
+	-webkit-animation: spinner-dot-anim 1.2s steps(4) infinite;
+			animation: spinner-dot-anim 1.2s steps(4) infinite;
+}
+}
+// Style for donut spinner
+.#{$spinner-donut-name} {
+	display: inline-block;
+	border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
+	border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
+	border-radius: 50%;
+	width: $spinner-donut-size;
+	height: $spinner-donut-size;
+	animation: spinner-donut-anim 1.2s linear infinite;
+}
+// Mixin for alternate donut spinner styles (spinner donut color variants).
+// Variables:
+// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
+// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
+// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
+@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
+.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
+	border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
+	border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
+}
+}