Add size and border options (#5)

Author: hacknug

.gitignore

@@ -1 +1,3 @@
 lib/
+.DS_STORE
+node_modules

readme.md

@@ -15,8 +15,7 @@ To get started using the plugin, you can require it into your Tailwind CSS confi
 
 ```js
 plugins: [
-  // Other plugins...
-
+  // Other plugins…
   require('tailwindcss-spinner')(),
 ],
 ```
@@ -27,11 +26,12 @@ If you want to customize the spinner, you can pass any combination of the follow
 
 ```js
 plugins: [
-  // Other plugins...
-
+  // Other plugins…
   require('tailwindcss-spinner')({
     name: 'spinner', // change class name
     color: 'grey-light', // color from config to make it
+    size: '1em', // size of the spinner (used for both width and height)
+    border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
   }),
 ],
 ```

src/index.js

@@ -1,20 +1,28 @@
-export default ({name = 'spinner', color = 'grey-light'} = {}) => ({addUtilities, config}) => addUtilities({
+export default ({
+  name = 'spinner',
+  color = '#dae1e7',
+  size = '1em',
+  border = '2px',
+} = {}) => ({
+  addUtilities,
+  config
+}) => addUtilities({
   [`.${name}`]: {
     'color': 'transparent !important',
     'pointer-events': 'none',
     'position': 'relative',
     '&:after': {
       'animation': 'spinAround 500ms infinite linear',
-      'border': `2px solid ${config(`colors.${color}`)}`,
+      'border': `${border} solid ${color}`,
       'border-radius': '290486px',
       'border-right-color': 'transparent',
       'border-top-color': 'transparent',
       'content': '""',
       'display': 'block',
-      'width': '1em',
-      'height': '1em',
-      'left': 'calc(50% - (1em / 2))',
-      'top': 'calc(50% - (1em / 2))',
+      'width': size,
+      'height': size,
+      'left': `calc(50% - (${size} / 2))`,
+      'top': `calc(50% - (${size} / 2))`,
       'position': 'absolute !important',
     },
   },