Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -4,3 +4,4 @@ bower_components/
 
 build/
 dist/
+examples/

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "three-dots",
+  "version": "0.1.0",
+  "description": "CSS loading animation made by single element.",
+  "main": "dist/three-dots.css",
+  "homepage": "https://github.com/nzbin/three-dots#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nzbin/three-dots.git"
+  },
+  "author": "nzbin <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nzbin/three-dots/issues"
+  },
+  "keywords": [
+    "three-dots",
+    "css-framework",
+    "sass"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^6.5.4",
+    "cpy-cli": "^1.0.1",
+    "node-sass": "^4.5.3",
+    "npm-run-all": "^2.3.0",
+    "onchange": "^2.5.0",
+    "postcss-cli": "^2.6.0",
+    "rimraf": "^2.5.4"
+  },
+  "engines": {
+    "node": ">=4"
+  },
+  "scripts": {
+    "start": "run-p build watch",
+    "build": "run-s clean sass autoprefixer",
+    "clean": "rimraf dist",
+    "sass": "node-sass --output-style expanded src/three-dots.scss dist/three-dots.css && node-sass --output-style compressed src/three-dots.scss dist/three-dots.min.css",
+    "copy": "cpy dist/*.css !dist/*.min.css docs/css",
+    "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
+    "watch": "onchange src -- run-p build"
+  }
+}

src/dot-elastic.scss

@@ -0,0 +1,91 @@
+// ----------------------------------------------
+// Dot Elastic
+// ----------------------------------------------
+
+@mixin dot() {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #ccc;
+}
+
+.dot-elastic {
+  position: relative;
+  @include dot;
+
+  animation: dot 1s infinite linear;
+
+  &:before,
+  &:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    @include dot;
+  }
+
+  &:before {
+    left: -15px;
+    animation: dotBefore 1s infinite linear;
+  }
+
+  &:after {
+    left: 15px;
+    animation: dotAfter 1s infinite linear;
+  }
+}
+
+
+@keyframes dotBefore {
+  0% {
+    transform: scale(1,1);
+  }
+  25% {
+    transform: scale(1,1.25);
+  }
+  50% {
+    transform: scale(1,0.75);
+  }
+  75% {
+    transform: scale(1,1);
+  }
+  100% {
+    transform: scale(1,1);
+  }
+}
+
+@keyframes dot {
+  0% {
+    transform: scale(1,1);
+  }
+  25% {
+    transform: scale(1,1);
+  }
+  50% {
+    transform: scale(1,1.25);
+  }
+  75% {
+    transform: scale(1,1);
+  }
+  100% {
+    transform: scale(1,1);
+  }
+}
+
+@keyframes dotAfter {
+  0% {
+    transform: scale(1,1);
+  }
+  25% {
+    transform: scale(1,1);
+  }
+  50% {
+    transform: scale(1,0.75);
+  }
+  75% {
+    transform: scale(1,1.25);
+  }
+  100% {
+    transform: scale(1,1);
+  }
+}

src/three-dots.scss

@@ -0,0 +1,13 @@
+/**
+ *
+ * three-dots.css v0.1.0
+ *
+ * https://nzbin.github.io/three-dots/
+ *
+ * Copyright (c) 2017 nzbin
+ *
+ * Released under the MIT license
+ *
+ */
+
+@import "dot-elastic";