initial commit

Author: joshmanders

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "node": "6.9.0"
+      }
+    }]
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", { "useBuiltIns": true }],
+    "add-module-exports"
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+lib/

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2018 Josh Manders <josh@joshmanders.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "tailwindcss-spinner",
+  "version": "0.1.0",
+  "description": "Spinner utility for Tailwind CSS",
+  "main": "index.js",
+  "repository": "git@github.com:aniftyco/tailwindcss-spinner.git",
+  "author": "Josh Manders <josh@joshmanders.com>",
+  "license": "MIT",
+  "files": [
+    "lib/",
+    "index.js"
+  ],
+  "keywords": [
+    "tailwindcss",
+    "tailwind"
+  ],
+  "scripts": {
+    "prebuild": "rimraf lib/",
+    "build": "babel src/ --out-dir lib/",
+    "test": "jest",
+    "prepublish": "yarn build"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "eslint": "^4.19.1",
+    "eslint-config-nifty": "^0.4.1",
+    "eslint-plugin-jest": "^21.15.0",
+    "jest": "^22.4.3",
+    "rimraf": "^2.6.2"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "collectCoverageFrom": [
+      "!node_modules/**",
+      "!tests/**",
+      "src/**"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 0
+      }
+    }
+  }
+}

readme.md

@@ -0,0 +1,41 @@
+# Tailwind CSS Spinner
+> Spinner utility for Tailwind CSS
+
+## Installation
+
+You can install it with yarn
+
+```bash
+yarn add tailwindcss-spinner
+```
+
+## Usage
+
+To get started using the plugin, you can require it into your Tailwind CSS config file
+
+```js
+plugins: [
+  // Other plugins...
+
+  require('tailwindcss-spinner')(),
+],
+```
+
+Now you will have a `.spinner` class available in your CSS.
+
+If you want to customize the spinner, you can pass any combination of the following options (shown with default values).
+
+```js
+plugins: [
+  // Other plugins...
+
+  require('tailwindcss-spinner')({
+    name: 'spinner', // change class name
+    color: 'grey-light', // color from config to make it
+  }),
+],
+```
+
+## Example
+
+![](https://i.imgur.com/UbwGglQ.gif)

src/index.js

@@ -0,0 +1,29 @@
+export default ({name = 'spinner', color = 'grey-light'}) => ({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-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))',
+      'position': 'absolute !important',
+    },
+  },
+  '@keyframes spinAround': {
+    'from': {
+      'transform': 'rotate(0deg)',
+    },
+    'to': {
+      'transform': 'rotate(359deg)',
+    },
+  },
+});

tests/index.spec.js

@@ -0,0 +1,3 @@
+test('example', () => {
+  expect(true).toBe(true);
+});