Created Spinners (markdown)

Spinners.md

@@ -0,0 +1,54 @@
+Spinner components are simple visual components for indicating loading states. They come in two styles (dots & round) and they can be created by using the two mixins provided in the [_spinner.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_spinner.scss) partial file.
+
+## Making a dotted spinner component
+
+To make a dotted spinner component, use the `make-spinner-dots` **mixin**.
+
+### Definition
+
+	make-spinner-dots(
+		$spinner-dots-name, 
+		$spinner-dots-height, 
+		$spinner-dots-animation-time)
+
+### Parameters
+
+- $spinner-dots-name           :	The class name of the dotted spinner component.
+- $spinner-dots-height         :	The height of the dotted spinner component. [1][2]
+- $spinner-dots-animation-time :	The animation time of the dotted spinner component.
+	
+**Notes:**
+
+- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is suggested that you specify it in the same measurement as the text base.
+- [2] : The value of $spinner-dots-height will be used for both the size of the component and the animation. Some tweaking might be required.
+
+## Making a round spinner component
+
+To make a round spinner component, use the `make-spinner-round` **mixin**.
+
+### Definition
+
+	make-spinner-round(
+		$spinner-round-name, 
+		$spinner-round-size, 
+		$spinner-round-doughnut-style, 
+		$spinner-round-spin-style, 
+		$spinner-round-animation-time)
+
+### Parameters
+
+- $spinner-round-name           :	The class name of the round spinner component.
+- $spinner-round-size           :	The size of the round spinner component. [1]
+- $spinner-round-doughnut-style :	The doughnut style of the round spinner component. [2]
+- $spinner-round-spin-style     :	The spinning part style of the round spinner component. [2]
+- $spinner-round-animation-time :	The animation time of the round spinner component.
+
+**Notes:**
+
+- [1] : The value of $spinner-round-size affects both height and width of the component.
+- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles specified in border style format.
+
+## Remarks
+
+- Spinner components use animations that might conflict with user-specific animations because of naming. These animations are named `spin-dots` and `spin-round` accordingly.
+- Some styling has been predefined such as the dotted spinner's text and the starting point of the round spinner to be on the left. These choices can be changed manually.