diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4039ff1 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index 7170d72..c48bc10 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ bower_components/ build/ dist/ +examples/ diff --git a/package.json b/package.json new file mode 100644 index 0000000..3662d55 --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/src/dot-elastic.scss b/src/dot-elastic.scss new file mode 100644 index 0000000..7889516 --- /dev/null +++ b/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); + } +} diff --git a/src/three-dots.scss b/src/three-dots.scss new file mode 100644 index 0000000..df68f4c --- /dev/null +++ b/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";