From 1e86fe601b34ba7625943237dddda4b048fffe11 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 15:25:20 +0100 Subject: [PATCH 01/38] Remove bloat --- .jshintrc | 92 ------------------------------------------------- gulpfile.js | 97 ---------------------------------------------------- package.json | 11 +----- 3 files changed, 1 insertion(+), 199 deletions(-) delete mode 100644 .jshintrc delete mode 100644 gulpfile.js diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 1950396..0000000 --- a/.jshintrc +++ /dev/null @@ -1,92 +0,0 @@ -{ - "bitwise" : true, // Prohibit bitwise operators (&, |, ^, etc.). - "curly" : true, // Require {} for every new block or scope. - "eqeqeq" : true, // Require triple equals i.e. `===`. - "forin" : true, // Tolerate `for in` loops without `hasOwnPrototype`. - "immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );` - "latedef" : true, // Prohibit variable use before definition. - "newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`. - "noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`. - "noempty" : true, // Prohibit use of empty blocks. - "nonew" : true, // Prohibit use of constructors for side-effects. - "plusplus" : true, // Prohibit use of `++` & `--`. - "regexp" : true, // Prohibit `.` and `[^...]` in regular expressions. - "undef" : true, // Require all non-global variables be declared before they are used. - "strict" : true, // Require `use strict` pragma in every file. - "trailing" : true, // Prohibit trailing whitespaces. - - // == Relaxing Options ================================================ - // - // These options allow you to suppress certain types of warnings. Use - // them only if you are absolutely positive that you know what you are - // doing. - - "asi" : false, // Tolerate Automatic Semicolon Insertion (no semicolons). - "boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments. - "debug" : false, // Allow debugger statements e.g. browser breakpoints. - "eqnull" : false, // Tolerate use of `== null`. - "es5" : false, // Allow EcmaScript 5 syntax. - "esnext" : false, // Allow ES.next specific features such as `const` and `let`. - "evil" : false, // Tolerate use of `eval`. - "expr" : false, // Tolerate `ExpressionStatement` as Programs. - "funcscope" : false, // Tolerate declarations of variables inside of control structures while accessing them later from the outside. - "globalstrict" : false, // Allow global "use strict" (also enables 'strict'). - "iterator" : false, // Allow usage of __iterator__ property. - "lastsemic" : false, // Tolerat missing semicolons when the it is omitted for the last statement in a one-line block. - "laxbreak" : false, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons. - "laxcomma" : false, // Suppress warnings about comma-first coding style. - "loopfunc" : false, // Allow functions to be defined within loops. - "multistr" : true, // Tolerate multi-line strings. - "onecase" : false, // Tolerate switches with just one case. - "proto" : false, // Tolerate __proto__ property. This property is deprecated. - "regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`. - "scripturl" : false, // Tolerate script-targeted URLs. - "smarttabs" : false, // Tolerate mixed tabs and spaces when the latter are used for alignmnent only. - "shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`. - "sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`. - "supernew" : false, // Tolerate `new function () { ... };` and `new Object;`. - "validthis" : false, // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function. - - // == Environments ==================================================== - // - // These options pre-define global variables that are exposed by - // popular JavaScript libraries and runtime environments—such as - // browser or node.js. - - "browser" : false, // Standard browser globals e.g. `window`, `document`. - "couch" : false, // Enable globals exposed by CouchDB. - "devel" : false, // Allow development statements e.g. `console.log();`. - "dojo" : false, // Enable globals exposed by Dojo Toolkit. - "jquery" : false, // Enable globals exposed by jQuery JavaScript library. - "mootools" : false, // Enable globals exposed by MooTools JavaScript framework. - "node" : true, // Enable globals available when code is running inside of the NodeJS runtime environment. - "nonstandard" : false, // Define non-standard but widely adopted globals such as escape and unescape. - "prototypejs" : false, // Enable globals exposed by Prototype JavaScript framework. - "rhino" : false, // Enable globals available when your code is running inside of the Rhino runtime environment. - "wsh" : false, // Enable globals available when your code is running as a script for the Windows Script Host. - - // == JSLint Legacy =================================================== - // - // These options are legacy from JSLint. Aside from bug fixes they will - // not be improved in any way and might be removed at any point. - - "nomen" : false, // Prohibit use of initial or trailing underbars in names. - "onevar" : false, // Allow only one `var` statement per function. - "passfail" : false, // Stop on first error. - "white" : false, // Check against strict whitespace and indentation rules. - - // == Undocumented Options ============================================ - // - // While I've found these options in [example1][2] and [example2][3] - // they are not described in the [JSHint Options documentation][4]. - // - // [4]: http://www.jshint.com/options/ - - "maxerr" : 100, // Maximum errors before stopping. - "predef" : [ // Extra globals. - //"exampleVar", - //"anotherCoolGlobal", - //"iLoveDouglas" - ], - "indent" : 4 // Specify indentation spacing -} diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index b60299c..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,97 +0,0 @@ -'use strict'; -var _ = require('lodash'); -var fs = require('fs'); -var Q = require('q'); -var gulp = require('gulp'); -var autoprefixer = require('gulp-autoprefixer'); -var sass = require('gulp-sass'); -var del = require('del'); - -var htmlDir = './examples', - cssDir = './css', - scssDir = './scss', - htmlTmpl = '\n\ -\n\ -\n\ - <%= title %>\n\ - \n\ -\n\ -\n\ - <%= bodyContent %>\n\ -\n\ -'; - -var getHtmlUsageExample = function(cssContent) { - var match = cssContent.match(/Usage:([\s\S]+\*[.\s\S]+\>)/); - return match && match.length > 1 ? match[1].replace(/ \*/g, '') : ''; -}; - -gulp.task('clean-styles', function(cb) { - del([cssDir], cb); -}); - - -gulp.task('styles', ['clean-styles'], function() { - return gulp.src(scssDir + '/**/*.scss') - .pipe(sass({errLogToConsole: true})) - .pipe(autoprefixer('last 2 versions', {map: false})) - .pipe(gulp.dest(cssDir)); -}); - - -gulp.task('clean-html', function(cb) { - del([htmlDir], cb); -}); - - -// Generates HTML files from the usage examples found in the CSS files -gulp.task('html', ['styles', 'clean-html'], function() { - var spinnersDir = cssDir + '/spinners/'; - var allDeferred = Q.defer(); - - fs.mkdirSync(htmlDir); - - fs.readdir(spinnersDir, function(err, filenames) { - var promises = filenames.map(function(filename) { - if (filename.indexOf('.css') === -1) { return; } - var deferred = Q.defer(); - var title = filename.replace('.css', '').replace(/-/g, ' '); - var cssFilepath = spinnersDir + filename; - var htmlFilename = filename.replace('.css', '.html'); - - var readCssFile = function(err, cssContent) { - if (err) { console.log(err); deferred.reject(err); } - var bodyContent = getHtmlUsageExample(cssContent); - var html = _.template(htmlTmpl)({ - css: cssContent, - title: title, - bodyContent: bodyContent - }); - fs.writeFile(htmlDir + '/' + htmlFilename, html, function(err, data) { - if (err) { console.log(err); deferred.reject(err); } - deferred.resolve(); - }); - }; - - fs.readFile(cssFilepath, {encoding: 'utf8'}, readCssFile); - return deferred.promise; - }); - Q.all(promises).then(allDeferred.resolve); - - }); - - return allDeferred; -}); - - -gulp.task('build', ['html', 'styles']); - - -gulp.task('default', ['build']); - - -gulp.task('watch', ['build'], function() { - gulp.watch(scssDir + '/**/*.scss', ['build']); -}); diff --git a/package.json b/package.json index e5bdb73..c04fe4a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "loading", "ui" ], - "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, @@ -22,13 +21,5 @@ "bugs": { "url": "https://github.com/tobiasahlin/SpinKit/issues" }, - "homepage": "https://github.com/tobiasahlin/SpinKit", - "devDependencies": { - "del": "^1.2.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "^2.3.1", - "gulp-sass": "^2.0.3", - "lodash": "^4.17.15", - "q": "^1.4.1" - } + "homepage": "https://github.com/tobiasahlin/SpinKit" } From c68fb02e86f66d33c88e1395704b66325f853737 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 15:36:52 +0100 Subject: [PATCH 02/38] Remove scss files --- css/spinners/1-rotating-plane.css | 35 -- css/spinners/10-fading-circle.css | 129 ------- css/spinners/11-folding-cube.css | 85 ---- css/spinners/2-double-bounce.css | 44 --- css/spinners/3-wave.css | 56 --- css/spinners/4-wandering-cubes.css | 68 ---- css/spinners/5-pulse.css | 32 -- css/spinners/6-chasing-dots.css | 58 --- css/spinners/7-three-bounce.css | 44 --- css/spinners/8-circle.css | 133 ------- css/spinners/9-cube-grid.css | 76 ---- scss/_variables.scss | 3 - scss/spinkit.scss | 12 - scss/spinners/1-rotating-plane.scss | 25 -- scss/spinners/10-fading-circle.scss | 63 --- scss/spinners/11-folding-cube.scss | 70 ---- scss/spinners/2-double-bounce.scss | 38 -- scss/spinners/3-wave.scss | 42 -- scss/spinners/4-wandering-cubes.scss | 51 --- scss/spinners/5-pulse.scss | 25 -- scss/spinners/6-chasing-dots.scss | 52 --- scss/spinners/7-three-bounce.scss | 40 -- scss/spinners/8-circle.scss | 62 --- scss/spinners/9-cube-grid.scss | 55 --- spinkit.css | 556 +++++++++++++++++++++++++++ 25 files changed, 556 insertions(+), 1298 deletions(-) delete mode 100644 css/spinners/1-rotating-plane.css delete mode 100644 css/spinners/10-fading-circle.css delete mode 100644 css/spinners/11-folding-cube.css delete mode 100644 css/spinners/2-double-bounce.css delete mode 100644 css/spinners/3-wave.css delete mode 100644 css/spinners/4-wandering-cubes.css delete mode 100644 css/spinners/5-pulse.css delete mode 100644 css/spinners/6-chasing-dots.css delete mode 100644 css/spinners/7-three-bounce.css delete mode 100644 css/spinners/8-circle.css delete mode 100644 css/spinners/9-cube-grid.css delete mode 100644 scss/_variables.scss delete mode 100644 scss/spinkit.scss delete mode 100644 scss/spinners/1-rotating-plane.scss delete mode 100644 scss/spinners/10-fading-circle.scss delete mode 100644 scss/spinners/11-folding-cube.scss delete mode 100644 scss/spinners/2-double-bounce.scss delete mode 100644 scss/spinners/3-wave.scss delete mode 100644 scss/spinners/4-wandering-cubes.scss delete mode 100644 scss/spinners/5-pulse.scss delete mode 100644 scss/spinners/6-chasing-dots.scss delete mode 100644 scss/spinners/7-three-bounce.scss delete mode 100644 scss/spinners/8-circle.scss delete mode 100644 scss/spinners/9-cube-grid.scss create mode 100644 spinkit.css diff --git a/css/spinners/1-rotating-plane.css b/css/spinners/1-rotating-plane.css deleted file mode 100644 index b9cb2dd..0000000 --- a/css/spinners/1-rotating-plane.css +++ /dev/null @@ -1,35 +0,0 @@ -/* - * Usage: - * -
- * - */ -.sk-rotating-plane { - width: 40px; - height: 40px; - background-color: #333; - margin: 40px auto; - -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; - animation: sk-rotatePlane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -@keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } diff --git a/css/spinners/10-fading-circle.css b/css/spinners/10-fading-circle.css deleted file mode 100644 index b8138cb..0000000 --- a/css/spinners/10-fading-circle.css +++ /dev/null @@ -1,129 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-fading-circle { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-fading-circle .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-fading-circle .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; - animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } - .sk-fading-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-fading-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-fading-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-fading-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-fading-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-fading-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-fading-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-fading-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-fading-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-fading-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-fading-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-fading-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-fading-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-fading-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-fading-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - .sk-fading-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } - .sk-fading-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } - .sk-fading-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } - .sk-fading-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } - .sk-fading-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } - .sk-fading-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } - .sk-fading-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } - -@keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } diff --git a/css/spinners/11-folding-cube.css b/css/spinners/11-folding-cube.css deleted file mode 100644 index c41a519..0000000 --- a/css/spinners/11-folding-cube.css +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
- * - */ -.sk-folding-cube { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; - -webkit-transform: rotateZ(45deg); - transform: rotateZ(45deg); } - .sk-folding-cube .sk-cube { - float: left; - width: 50%; - height: 50%; - position: relative; - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); } - .sk-folding-cube .sk-cube:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #333; - -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; - animation: sk-foldCubeAngle 2.4s infinite linear both; - -webkit-transform-origin: 100% 100%; - -ms-transform-origin: 100% 100%; - transform-origin: 100% 100%; } - .sk-folding-cube .sk-cube2 { - -webkit-transform: scale(1.1) rotateZ(90deg); - transform: scale(1.1) rotateZ(90deg); } - .sk-folding-cube .sk-cube3 { - -webkit-transform: scale(1.1) rotateZ(180deg); - transform: scale(1.1) rotateZ(180deg); } - .sk-folding-cube .sk-cube4 { - -webkit-transform: scale(1.1) rotateZ(270deg); - transform: scale(1.1) rotateZ(270deg); } - .sk-folding-cube .sk-cube2:before { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-folding-cube .sk-cube3:before { - -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; } - .sk-folding-cube .sk-cube4:before { - -webkit-animation-delay: 0.9s; - animation-delay: 0.9s; } - -@-webkit-keyframes sk-foldCubeAngle { - 0%, 10% { - -webkit-transform: perspective(140px) rotateX(-180deg); - transform: perspective(140px) rotateX(-180deg); - opacity: 0; } - 25%, 75% { - -webkit-transform: perspective(140px) rotateX(0deg); - transform: perspective(140px) rotateX(0deg); - opacity: 1; } - 90%, 100% { - -webkit-transform: perspective(140px) rotateY(180deg); - transform: perspective(140px) rotateY(180deg); - opacity: 0; } } - -@keyframes sk-foldCubeAngle { - 0%, 10% { - -webkit-transform: perspective(140px) rotateX(-180deg); - transform: perspective(140px) rotateX(-180deg); - opacity: 0; } - 25%, 75% { - -webkit-transform: perspective(140px) rotateX(0deg); - transform: perspective(140px) rotateX(0deg); - opacity: 1; } - 90%, 100% { - -webkit-transform: perspective(140px) rotateY(180deg); - transform: perspective(140px) rotateY(180deg); - opacity: 0; } } diff --git a/css/spinners/2-double-bounce.css b/css/spinners/2-double-bounce.css deleted file mode 100644 index 2e78662..0000000 --- a/css/spinners/2-double-bounce.css +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -.sk-double-bounce { - width: 40px; - height: 40px; - position: relative; - margin: 40px auto; } - .sk-double-bounce .sk-child { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #333; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; - animation: sk-doubleBounce 2s infinite ease-in-out; } - .sk-double-bounce .sk-double-bounce2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; } - -@-webkit-keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } diff --git a/css/spinners/3-wave.css b/css/spinners/3-wave.css deleted file mode 100644 index 5cfa871..0000000 --- a/css/spinners/3-wave.css +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
- * - */ -.sk-wave { - margin: 40px auto; - width: 50px; - height: 40px; - text-align: center; - font-size: 10px; } - .sk-wave .sk-rect { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } - .sk-wave .sk-rect1 { - -webkit-animation-delay: -1.2s; - animation-delay: -1.2s; } - .sk-wave .sk-rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-wave .sk-rect3 { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-wave .sk-rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-wave .sk-rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - -@-webkit-keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } - -@keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } diff --git a/css/spinners/4-wandering-cubes.css b/css/spinners/4-wandering-cubes.css deleted file mode 100644 index b67483f..0000000 --- a/css/spinners/4-wandering-cubes.css +++ /dev/null @@ -1,68 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -.sk-wandering-cubes { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-wandering-cubes .sk-cube { - background-color: #333; - width: 10px; - height: 10px; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; - animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } - .sk-wandering-cubes .sk-cube2 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - -@-webkit-keyframes sk-wanderingCube { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 25% { - -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); - transform: translateX(30px) rotate(-90deg) scale(0.5); } - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); - transform: translateX(30px) translateY(30px) rotate(-179deg); } - 50.1% { - -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); - transform: translateX(30px) translateY(30px) rotate(-180deg); } - 75% { - -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } - -@keyframes sk-wanderingCube { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 25% { - -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); - transform: translateX(30px) rotate(-90deg) scale(0.5); } - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); - transform: translateX(30px) translateY(30px) rotate(-179deg); } - 50.1% { - -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); - transform: translateX(30px) translateY(30px) rotate(-180deg); } - 75% { - -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } diff --git a/css/spinners/5-pulse.css b/css/spinners/5-pulse.css deleted file mode 100644 index 6e4e8f4..0000000 --- a/css/spinners/5-pulse.css +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Usage: - * - - * - */ -.sk-spinner-pulse { - width: 40px; - height: 40px; - margin: 40px auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; - animation: sk-pulseScaleOut 1s infinite ease-in-out; } - -@-webkit-keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -@keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } diff --git a/css/spinners/6-chasing-dots.css b/css/spinners/6-chasing-dots.css deleted file mode 100644 index 033e3e6..0000000 --- a/css/spinners/6-chasing-dots.css +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -.sk-chasing-dots { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; - text-align: center; - -webkit-animation: sk-chasingDotsRotate 2s infinite linear; - animation: sk-chasingDotsRotate 2s infinite linear; } - .sk-chasing-dots .sk-child { - width: 60%; - height: 60%; - display: inline-block; - position: absolute; - top: 0; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; - animation: sk-chasingDotsBounce 2s infinite ease-in-out; } - .sk-chasing-dots .sk-dot2 { - top: auto; - bottom: 0; - -webkit-animation-delay: -1s; - animation-delay: -1s; } - -@-webkit-keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@-webkit-keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } diff --git a/css/spinners/7-three-bounce.css b/css/spinners/7-three-bounce.css deleted file mode 100644 index a7c8e96..0000000 --- a/css/spinners/7-three-bounce.css +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
- * - */ -.sk-three-bounce { - margin: 40px auto; - width: 80px; - text-align: center; } - .sk-three-bounce .sk-child { - width: 20px; - height: 20px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; - animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } - .sk-three-bounce .sk-bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } - .sk-three-bounce .sk-bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-three-bounce { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-three-bounce { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } diff --git a/css/spinners/8-circle.css b/css/spinners/8-circle.css deleted file mode 100644 index fb12126..0000000 --- a/css/spinners/8-circle.css +++ /dev/null @@ -1,133 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-circle { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-circle .sk-child { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-circle .sk-child:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; - animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } - .sk-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - .sk-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } - .sk-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } - .sk-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } - .sk-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } - .sk-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } - .sk-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } - .sk-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } diff --git a/css/spinners/9-cube-grid.css b/css/spinners/9-cube-grid.css deleted file mode 100644 index a2ec2cc..0000000 --- a/css/spinners/9-cube-grid.css +++ /dev/null @@ -1,76 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-cube-grid { - width: 40px; - height: 40px; - margin: 40px auto; - /* - * Spinner positions - * 1 2 3 - * 4 5 6 - * 7 8 9 - */ } - .sk-cube-grid .sk-cube { - width: 33.33%; - height: 33.33%; - background-color: #333; - float: left; - -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } - .sk-cube-grid .sk-cube1 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube2 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube3 { - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } - .sk-cube-grid .sk-cube4 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube5 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube6 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube7 { - -webkit-animation-delay: 0.0s; - animation-delay: 0.0s; } - .sk-cube-grid .sk-cube8 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube9 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - -@-webkit-keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } - -@keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } diff --git a/scss/_variables.scss b/scss/_variables.scss deleted file mode 100644 index c5750a7..0000000 --- a/scss/_variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -$spinkit-spinner-margin: 40px auto !default; -$spinkit-size: 40px !default; -$spinkit-spinner-color: #333 !default; diff --git a/scss/spinkit.scss b/scss/spinkit.scss deleted file mode 100644 index 1434a92..0000000 --- a/scss/spinkit.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import - "spinners/1-rotating-plane", - "spinners/2-double-bounce", - "spinners/3-wave", - "spinners/4-wandering-cubes", - "spinners/5-pulse", - "spinners/6-chasing-dots", - "spinners/7-three-bounce", - "spinners/8-circle", - "spinners/9-cube-grid", - "spinners/10-fading-circle", - "spinners/11-folding-cube"; diff --git a/scss/spinners/1-rotating-plane.scss b/scss/spinners/1-rotating-plane.scss deleted file mode 100644 index 3b3742a..0000000 --- a/scss/spinners/1-rotating-plane.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Usage: - * -
- * - */ -@import "../variables"; - -.sk-rotating-plane { - width: $spinkit-size; - height: $spinkit-size; - background-color: $spinkit-spinner-color; - margin: $spinkit-spinner-margin; - animation: sk-rotatePlane 1.2s infinite ease-in-out; -} - -@keyframes sk-rotatePlane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - } 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - } 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - } -} diff --git a/scss/spinners/10-fading-circle.scss b/scss/spinners/10-fading-circle.scss deleted file mode 100644 index bb73f56..0000000 --- a/scss/spinners/10-fading-circle.scss +++ /dev/null @@ -1,63 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -@import "../variables"; - -.sk-fading-circle { - $circleCount: 12; - $animationDuration: 1.2s; - - margin: $spinkit-spinner-margin; - width: $spinkit-size; - height: $spinkit-size; - position: relative; - - .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - } - - .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: $spinkit-spinner-color; - border-radius: 100%; - animation: sk-circleFadeDelay $animationDuration infinite ease-in-out both; - } - - @for $i from 2 through $circleCount { - .sk-circle#{$i} { transform: rotate(360deg / $circleCount * ($i - 1)); } - } - - @for $i from 2 through $circleCount { - .sk-circle#{$i}:before { animation-delay: - $animationDuration + $animationDuration / $circleCount * ($i - 1); } - } - -} - -@keyframes sk-circleFadeDelay { - 0%, 39%, 100% { opacity: 0 } - 40% { opacity: 1 } -} diff --git a/scss/spinners/11-folding-cube.scss b/scss/spinners/11-folding-cube.scss deleted file mode 100644 index 99ef505..0000000 --- a/scss/spinners/11-folding-cube.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
- * - */ -@import "../variables"; - -.sk-folding-cube { - $cubeCount: 4; - $animationDuration: 2.4s; - $delayRange: $animationDuration/2; - - margin: $spinkit-spinner-margin; - width: $spinkit-size; - height: $spinkit-size; - position: relative; - transform: rotateZ(45deg); - - .sk-cube { - float: left; - width: 50%; - height: 50%; - position: relative; - transform: scale(1.1); - } - - .sk-cube:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: $spinkit-spinner-color; - animation: sk-foldCubeAngle $animationDuration infinite linear both; - transform-origin: 100% 100%; - } - - // Rotation / angle - @for $i from 2 through $cubeCount { - .sk-cube#{$i} { - transform: scale(1.1) rotateZ(90deg * ($i - 1)); - } - } - - @for $i from 2 through $cubeCount { - .sk-cube#{$i}:before { - animation-delay: $delayRange / $cubeCount * ($i - 1); - } - } -} - -@keyframes sk-foldCubeAngle { - 0%, 10% { - transform: perspective(140px) rotateX(-180deg); - opacity: 0; - } 25%, 75% { - transform: perspective(140px) rotateX(0deg); - opacity: 1; - } 90%, 100% { - transform: perspective(140px) rotateY(180deg); - opacity: 0; - } -} diff --git a/scss/spinners/2-double-bounce.scss b/scss/spinners/2-double-bounce.scss deleted file mode 100644 index 3b37752..0000000 --- a/scss/spinners/2-double-bounce.scss +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -@import "../variables"; - -.sk-double-bounce { - width: $spinkit-size; - height: $spinkit-size; - position: relative; - margin: $spinkit-spinner-margin; - - .sk-child { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: $spinkit-spinner-color; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - animation: sk-doubleBounce 2.0s infinite ease-in-out; - } - - .sk-double-bounce2 { - animation-delay: -1.0s; - } -} - -@keyframes sk-doubleBounce { - 0%, 100% { transform: scale(0) } - 50% { transform: scale(1.0) } -} diff --git a/scss/spinners/3-wave.scss b/scss/spinners/3-wave.scss deleted file mode 100644 index b1347e2..0000000 --- a/scss/spinners/3-wave.scss +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
- * - */ -@import "../variables"; - -.sk-wave { - $rectCount: 5; - $animationDuration: 1.2s; - $delayRange: 0.4s; - - margin: $spinkit-spinner-margin; - width: $spinkit-size * 1.25; - height: $spinkit-size; - text-align: center; - font-size: 10px; - - .sk-rect { - background-color: $spinkit-spinner-color; - height: 100%; - width: 6px; - display: inline-block; - animation: sk-waveStretchDelay $animationDuration infinite ease-in-out; - } - - @for $i from 1 through $rectCount { - .sk-rect#{$i} { animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * ($i - 1); } - } -} - -@keyframes sk-waveStretchDelay { - 0%, 40%, 100% { transform: scaleY(0.4) } - 20% { transform: scaleY(1.0) } -} diff --git a/scss/spinners/4-wandering-cubes.scss b/scss/spinners/4-wandering-cubes.scss deleted file mode 100644 index d494584..0000000 --- a/scss/spinners/4-wandering-cubes.scss +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -@import "../variables"; - -.sk-wandering-cubes { - $animationDuration: 1.8s; - - margin: $spinkit-spinner-margin; - width: $spinkit-size; - height: $spinkit-size; - position: relative; - - .sk-cube { - background-color: $spinkit-spinner-color; - width: 10px; - height: 10px; - position: absolute; - top: 0; - left: 0; - animation: sk-wanderingCube $animationDuration ease-in-out #{-$animationDuration} infinite both; - } - - .sk-cube2 { - animation-delay: -$animationDuration / 2; - } -} - -@keyframes sk-wanderingCube { - $cubeDistance: 30px; - 0% { - transform: rotate(0deg); - } 25% { - transform: translateX($cubeDistance) rotate(-90deg) scale(0.5); - } 50% { - /* Hack to make FF rotate in the right direction */ - transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-179deg); - } 50.1% { - transform: translateX($cubeDistance) translateY($cubeDistance) rotate(-180deg); - } 75% { - transform: translateX(0) translateY($cubeDistance) rotate(-270deg) scale(0.5); - } 100% { - transform: rotate(-360deg); - } -} diff --git a/scss/spinners/5-pulse.scss b/scss/spinners/5-pulse.scss deleted file mode 100644 index 5e4d81e..0000000 --- a/scss/spinners/5-pulse.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Usage: - * - - * - */ -@import "../variables"; - -.sk-spinner-pulse { - width: $spinkit-size; - height: $spinkit-size; - margin: $spinkit-spinner-margin; - background-color: $spinkit-spinner-color; - border-radius: 100%; - animation: sk-pulseScaleOut 1.0s infinite ease-in-out; -} - -@keyframes sk-pulseScaleOut { - 0% { - transform: scale(0); - } 100% { - transform: scale(1.0); - opacity: 0; - } -} diff --git a/scss/spinners/6-chasing-dots.scss b/scss/spinners/6-chasing-dots.scss deleted file mode 100644 index 8114141..0000000 --- a/scss/spinners/6-chasing-dots.scss +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Usage: - * -
-
-
-
- * - */ -@import "../variables"; - -.sk-chasing-dots { - $animationDuration: 2.0s; - - margin: $spinkit-spinner-margin; - width: $spinkit-size; - height: $spinkit-size; - position: relative; - text-align: center; - animation: sk-chasingDotsRotate $animationDuration infinite linear; - - .sk-child { - width: 60%; - height: 60%; - display: inline-block; - position: absolute; - top: 0; - background-color: $spinkit-spinner-color; - border-radius: 100%; - animation: sk-chasingDotsBounce $animationDuration infinite ease-in-out; - } - - .sk-dot2 { - top: auto; - bottom: 0; - animation-delay: - $animationDuration/2; - } -} - -@keyframes sk-chasingDotsRotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes sk-chasingDotsBounce { - 0%, 100% { - transform: scale(0); - } 50% { - transform: scale(1.0); - } -} diff --git a/scss/spinners/7-three-bounce.scss b/scss/spinners/7-three-bounce.scss deleted file mode 100644 index d54da9d..0000000 --- a/scss/spinners/7-three-bounce.scss +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
- * - */ - @import "../variables"; - -.sk-three-bounce { - $animationDuration: 1.4s; - $delayRange: 0.32s; - margin: $spinkit-spinner-margin; - width: $spinkit-size * 2; - text-align: center; - - .sk-child { - width: $spinkit-size / 2; - height: $spinkit-size / 2; - background-color: $spinkit-spinner-color; - - border-radius: 100%; - display: inline-block; - animation: sk-three-bounce $animationDuration ease-in-out 0s infinite both; - } - - .sk-bounce1 { animation-delay: -$delayRange; } - .sk-bounce2 { animation-delay: -$delayRange / 2; } -} - -@keyframes sk-three-bounce { - 0%, 80%, 100% { - transform: scale(0); - } 40% { - transform: scale(1.0); - } -} diff --git a/scss/spinners/8-circle.scss b/scss/spinners/8-circle.scss deleted file mode 100644 index 7e029a5..0000000 --- a/scss/spinners/8-circle.scss +++ /dev/null @@ -1,62 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -@import "../variables"; - -.sk-circle { - $circleCount: 12; - $animationDuration: 1.2s; - - margin: $spinkit-spinner-margin; - width: $spinkit-size; - height: $spinkit-size; - position: relative; - - .sk-child { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - } - - .sk-child:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: $spinkit-spinner-color; - border-radius: 100%; - animation: sk-circleBounceDelay $animationDuration infinite ease-in-out both; - } - - @for $i from 2 through $circleCount { - .sk-circle#{$i} { transform: rotate(360deg / $circleCount * ($i - 1)); } - } - - @for $i from 2 through $circleCount { - .sk-circle#{$i}:before { animation-delay: - $animationDuration + $animationDuration / $circleCount * ($i - 1); } - } -} - -@keyframes sk-circleBounceDelay { - 0%, 80%, 100% { transform: scale(0) } - 40% { transform: scale(1.0) } -} diff --git a/scss/spinners/9-cube-grid.scss b/scss/spinners/9-cube-grid.scss deleted file mode 100644 index 7a040e4..0000000 --- a/scss/spinners/9-cube-grid.scss +++ /dev/null @@ -1,55 +0,0 @@ -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
- * - */ -@import "../variables"; - -.sk-cube-grid { - $delayRange: 0.4s; - - width: $spinkit-size; - height: $spinkit-size; - margin: $spinkit-spinner-margin; - - .sk-cube { - width: 33.33%; - height: 33.33%; - background-color: $spinkit-spinner-color; - float: left; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; - } - - /* - * Spinner positions - * 1 2 3 - * 4 5 6 - * 7 8 9 - */ - - .sk-cube1 { animation-delay: $delayRange * 0.50 } - .sk-cube2 { animation-delay: $delayRange * 0.75 } - .sk-cube3 { animation-delay: $delayRange } - .sk-cube4 { animation-delay: $delayRange * 0.25 } - .sk-cube5 { animation-delay: $delayRange * 0.50 } - .sk-cube6 { animation-delay: $delayRange * 0.75 } - .sk-cube7 { animation-delay: 0.0s } - .sk-cube8 { animation-delay: $delayRange * 0.25 } - .sk-cube9 { animation-delay: $delayRange * 0.50 } -} - -@keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { transform:scale3D(1.0, 1.0, 1.0) } - 35% { transform:scale3D(0.0, 0.0, 1.0) } -} diff --git a/spinkit.css b/spinkit.css new file mode 100644 index 0000000..99dc713 --- /dev/null +++ b/spinkit.css @@ -0,0 +1,556 @@ +/* Preferences */ +:root { + --sk-size: 40px; + --sk-color: #333; +} + +/* Usage: + +
+ */ +.sk-rotating-plane { + width: var(--sk-size); + height: var(--sk-size); + background-color: var(--sk-size); + animation: sk-rotate-plane 1.2s infinite ease-in-out; +} + +@keyframes sk-rotate-plane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-double-bounce { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-double-bounce .sk-child { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: var(--sk-size); + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + animation: sk-doubleBounce 2s infinite ease-in-out; +} + + .sk-double-bounce .sk-double-bounce2 { + animation-delay: -1.0s; } + +@keyframes sk-doubleBounce { + 0%, 100% { + transform: scale(0); } + 50% { + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+ * + */ +.sk-wave { + margin: 40px auto; + width: 50px; + height: 40px; + text-align: center; + font-size: 10px; } + .sk-wave .sk-rect { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } + .sk-wave .sk-rect1 { + animation-delay: -1.2s; } + .sk-wave .sk-rect2 { + animation-delay: -1.1s; } + .sk-wave .sk-rect3 { + animation-delay: -1s; } + .sk-wave .sk-rect4 { + animation-delay: -0.9s; } + .sk-wave .sk-rect5 { + animation-delay: -0.8s; } + +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + transform: scaleY(0.4); } + 20% { + transform: scaleY(1); } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-wandering-cubes { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-wandering-cubes .sk-cube { + background-color: #333; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } + .sk-wandering-cubes .sk-cube2 { + animation-delay: -0.9s; } + + +@keyframes sk-wanderingCube { + 0% { + transform: rotate(0deg); } + 25% { + transform: translateX(30px) rotate(-90deg) scale(0.5); } + 50% { + /* Hack to make FF rotate in the right direction */ + transform: translateX(30px) translateY(30px) rotate(-179deg); } + 50.1% { + transform: translateX(30px) translateY(30px) rotate(-180deg); } + 75% { + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + 100% { + transform: rotate(-360deg); } } + +/* + * Usage: + * + + * + */ +.sk-spinner-pulse { + width: 40px; + height: 40px; + margin: 40px auto; + background-color: #333; + border-radius: 100%; + animation: sk-pulseScaleOut 1s infinite ease-in-out; } + +@keyframes sk-pulseScaleOut { + 0% { + transform: scale(0); } + 100% { + transform: scale(1); + opacity: 0; } } + +/* + * Usage: + * +
+
+
+
+ * + */ +.sk-chasing-dots { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + animation: sk-chasingDotsRotate 2s infinite linear; } + .sk-chasing-dots .sk-child { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + animation: sk-chasingDotsBounce 2s infinite ease-in-out; } + .sk-chasing-dots .sk-dot2 { + top: auto; + bottom: 0; + animation-delay: -1s; } + +@keyframes sk-chasingDotsRotate { + 100% { + transform: rotate(360deg); } } + + +@keyframes sk-chasingDotsBounce { + 0%, 100% { + transform: scale(0); } + 50% { + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+ * + */ +.sk-three-bounce { + margin: 40px auto; + width: 80px; + text-align: center; } + .sk-three-bounce .sk-child { + width: 20px; + height: 20px; + background-color: #333; + border-radius: 100%; + display: inline-block; + animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } + .sk-three-bounce .sk-bounce1 { + animation-delay: -0.32s; } + .sk-three-bounce .sk-bounce2 { + animation-delay: -0.16s; } + +@keyframes sk-three-bounce { + 0%, 80%, 100% { + transform: scale(0); } + 40% { + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-circle .sk-child { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-circle .sk-child:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } + .sk-circle .sk-circle2 { + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-circle .sk-circle3 { + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-circle .sk-circle4 { + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-circle .sk-circle5 { + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-circle .sk-circle6 { + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-circle .sk-circle7 { + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-circle .sk-circle8 { + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-circle .sk-circle9 { + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-circle .sk-circle10 { + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-circle .sk-circle11 { + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-circle .sk-circle12 { + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-circle .sk-circle2:before { + animation-delay: -1.1s; } + .sk-circle .sk-circle3:before { + animation-delay: -1s; } + .sk-circle .sk-circle4:before { + animation-delay: -0.9s; } + .sk-circle .sk-circle5:before { + animation-delay: -0.8s; } + .sk-circle .sk-circle6:before { + animation-delay: -0.7s; } + .sk-circle .sk-circle7:before { + animation-delay: -0.6s; } + .sk-circle .sk-circle8:before { + animation-delay: -0.5s; } + .sk-circle .sk-circle9:before { + animation-delay: -0.4s; } + .sk-circle .sk-circle10:before { + animation-delay: -0.3s; } + .sk-circle .sk-circle11:before { + animation-delay: -0.2s; } + .sk-circle .sk-circle12:before { + animation-delay: -0.1s; } + +@keyframes sk-circleBounceDelay { + 0%, 80%, 100% { + transform: scale(0); } + 40% { + transform: scale(1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-cube-grid { + width: 40px; + height: 40px; + margin: 40px auto; + /* + * Spinner positions + * 1 2 3 + * 4 5 6 + * 7 8 9 + */ } + .sk-cube-grid .sk-cube { + width: 33.33%; + height: 33.33%; + background-color: #333; + float: left; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } + .sk-cube-grid .sk-cube1 { + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube2 { + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube3 { + animation-delay: 0.4s; } + .sk-cube-grid .sk-cube4 { + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube5 { + animation-delay: 0.2s; } + .sk-cube-grid .sk-cube6 { + animation-delay: 0.3s; } + .sk-cube-grid .sk-cube7 { + animation-delay: 0.0s; } + .sk-cube-grid .sk-cube8 { + animation-delay: 0.1s; } + .sk-cube-grid .sk-cube9 { + animation-delay: 0.2s; } + +@keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + transform: scale3D(1, 1, 1); } + 35% { + transform: scale3D(0, 0, 1); } } + +/* + * Usage: + * +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-fading-circle { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; } + .sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + .sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } + .sk-fading-circle .sk-circle2 { + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + .sk-fading-circle .sk-circle3 { + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + .sk-fading-circle .sk-circle4 { + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .sk-fading-circle .sk-circle5 { + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + .sk-fading-circle .sk-circle6 { + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + .sk-fading-circle .sk-circle7 { + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .sk-fading-circle .sk-circle8 { + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + .sk-fading-circle .sk-circle9 { + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + .sk-fading-circle .sk-circle10 { + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + .sk-fading-circle .sk-circle11 { + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + .sk-fading-circle .sk-circle12 { + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + .sk-fading-circle .sk-circle2:before { + animation-delay: -1.1s; } + .sk-fading-circle .sk-circle3:before { + animation-delay: -1s; } + .sk-fading-circle .sk-circle4:before { + animation-delay: -0.9s; } + .sk-fading-circle .sk-circle5:before { + animation-delay: -0.8s; } + .sk-fading-circle .sk-circle6:before { + animation-delay: -0.7s; } + .sk-fading-circle .sk-circle7:before { + animation-delay: -0.6s; } + .sk-fading-circle .sk-circle8:before { + animation-delay: -0.5s; } + .sk-fading-circle .sk-circle9:before { + animation-delay: -0.4s; } + .sk-fading-circle .sk-circle10:before { + animation-delay: -0.3s; } + .sk-fading-circle .sk-circle11:before { + animation-delay: -0.2s; } + .sk-fading-circle .sk-circle12:before { + animation-delay: -0.1s; } + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } + +/* + * Usage: + * +
+
+
+
+
+
+ * + */ +.sk-folding-cube { + margin: 40px auto; + width: 40px; + height: 40px; + position: relative; + transform: rotateZ(45deg); } + .sk-folding-cube .sk-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + -ms-transform: scale(1.1); + transform: scale(1.1); } + .sk-folding-cube .sk-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #333; + animation: sk-foldCubeAngle 2.4s infinite linear both; + -ms-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .sk-folding-cube .sk-cube2 { + transform: scale(1.1) rotateZ(90deg); } + .sk-folding-cube .sk-cube3 { + transform: scale(1.1) rotateZ(180deg); } + .sk-folding-cube .sk-cube4 { + transform: scale(1.1) rotateZ(270deg); } + .sk-folding-cube .sk-cube2:before { + animation-delay: 0.3s; } + .sk-folding-cube .sk-cube3:before { + animation-delay: 0.6s; } + .sk-folding-cube .sk-cube4:before { + animation-delay: 0.9s; } + +@keyframes sk-foldCubeAngle { + 0%, 10% { + transform: perspective(140px) rotateX(-180deg); + opacity: 0; } + 25%, 75% { + transform: perspective(140px) rotateX(0deg); + opacity: 1; } + 90%, 100% { + transform: perspective(140px) rotateY(180deg); + opacity: 0; } } From 7653f08545bbc8dcebb4e9cd541806c859b72618 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 15:37:07 +0100 Subject: [PATCH 03/38] Move spinkit up --- css/spinkit.css | 770 ------------------------------------------------ 1 file changed, 770 deletions(-) delete mode 100644 css/spinkit.css diff --git a/css/spinkit.css b/css/spinkit.css deleted file mode 100644 index 0b79b86..0000000 --- a/css/spinkit.css +++ /dev/null @@ -1,770 +0,0 @@ -/* - * Usage: - * -
- * - */ -.sk-rotating-plane { - width: 40px; - height: 40px; - background-color: #333; - margin: 40px auto; - -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; - animation: sk-rotatePlane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -@keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -/* - * Usage: - * -
-
-
-
- * - */ -.sk-double-bounce { - width: 40px; - height: 40px; - position: relative; - margin: 40px auto; } - .sk-double-bounce .sk-child { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #333; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; - animation: sk-doubleBounce 2s infinite ease-in-out; } - .sk-double-bounce .sk-double-bounce2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; } - -@-webkit-keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * -
-
-
-
-
-
-
- * - */ -.sk-wave { - margin: 40px auto; - width: 50px; - height: 40px; - text-align: center; - font-size: 10px; } - .sk-wave .sk-rect { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } - .sk-wave .sk-rect1 { - -webkit-animation-delay: -1.2s; - animation-delay: -1.2s; } - .sk-wave .sk-rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-wave .sk-rect3 { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-wave .sk-rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-wave .sk-rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - -@-webkit-keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } - -@keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } - -/* - * Usage: - * -
-
-
-
- * - */ -.sk-wandering-cubes { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-wandering-cubes .sk-cube { - background-color: #333; - width: 10px; - height: 10px; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; - animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } - .sk-wandering-cubes .sk-cube2 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - -@-webkit-keyframes sk-wanderingCube { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 25% { - -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); - transform: translateX(30px) rotate(-90deg) scale(0.5); } - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); - transform: translateX(30px) translateY(30px) rotate(-179deg); } - 50.1% { - -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); - transform: translateX(30px) translateY(30px) rotate(-180deg); } - 75% { - -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } - -@keyframes sk-wanderingCube { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 25% { - -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); - transform: translateX(30px) rotate(-90deg) scale(0.5); } - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); - transform: translateX(30px) translateY(30px) rotate(-179deg); } - 50.1% { - -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); - transform: translateX(30px) translateY(30px) rotate(-180deg); } - 75% { - -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } - -/* - * Usage: - * - - * - */ -.sk-spinner-pulse { - width: 40px; - height: 40px; - margin: 40px auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; - animation: sk-pulseScaleOut 1s infinite ease-in-out; } - -@-webkit-keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -@keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -/* - * Usage: - * -
-
-
-
- * - */ -.sk-chasing-dots { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; - text-align: center; - -webkit-animation: sk-chasingDotsRotate 2s infinite linear; - animation: sk-chasingDotsRotate 2s infinite linear; } - .sk-chasing-dots .sk-child { - width: 60%; - height: 60%; - display: inline-block; - position: absolute; - top: 0; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; - animation: sk-chasingDotsBounce 2s infinite ease-in-out; } - .sk-chasing-dots .sk-dot2 { - top: auto; - bottom: 0; - -webkit-animation-delay: -1s; - animation-delay: -1s; } - -@-webkit-keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@-webkit-keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * -
-
-
-
-
- * - */ -.sk-three-bounce { - margin: 40px auto; - width: 80px; - text-align: center; } - .sk-three-bounce .sk-child { - width: 20px; - height: 20px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; - animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } - .sk-three-bounce .sk-bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } - .sk-three-bounce .sk-bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-three-bounce { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-three-bounce { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-circle { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-circle .sk-child { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-circle .sk-child:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; - animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } - .sk-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - .sk-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } - .sk-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } - .sk-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } - .sk-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } - .sk-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } - .sk-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } - .sk-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-cube-grid { - width: 40px; - height: 40px; - margin: 40px auto; - /* - * Spinner positions - * 1 2 3 - * 4 5 6 - * 7 8 9 - */ } - .sk-cube-grid .sk-cube { - width: 33.33%; - height: 33.33%; - background-color: #333; - float: left; - -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } - .sk-cube-grid .sk-cube1 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube2 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube3 { - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } - .sk-cube-grid .sk-cube4 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube5 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube6 { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube7 { - -webkit-animation-delay: 0.0s; - animation-delay: 0.0s; } - .sk-cube-grid .sk-cube8 { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube9 { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - -@-webkit-keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } - -@keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } - -/* - * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-fading-circle { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-fading-circle .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-fading-circle .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; - animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } - .sk-fading-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-fading-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-fading-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-fading-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-fading-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-fading-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-fading-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-fading-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-fading-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-fading-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-fading-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-fading-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - .sk-fading-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - .sk-fading-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - .sk-fading-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - .sk-fading-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } - .sk-fading-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } - .sk-fading-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } - .sk-fading-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } - .sk-fading-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } - .sk-fading-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } - .sk-fading-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } - -@keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } - -/* - * Usage: - * -
-
-
-
-
-
- * - */ -.sk-folding-cube { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; - -webkit-transform: rotateZ(45deg); - transform: rotateZ(45deg); } - .sk-folding-cube .sk-cube { - float: left; - width: 50%; - height: 50%; - position: relative; - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); } - .sk-folding-cube .sk-cube:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #333; - -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; - animation: sk-foldCubeAngle 2.4s infinite linear both; - -webkit-transform-origin: 100% 100%; - -ms-transform-origin: 100% 100%; - transform-origin: 100% 100%; } - .sk-folding-cube .sk-cube2 { - -webkit-transform: scale(1.1) rotateZ(90deg); - transform: scale(1.1) rotateZ(90deg); } - .sk-folding-cube .sk-cube3 { - -webkit-transform: scale(1.1) rotateZ(180deg); - transform: scale(1.1) rotateZ(180deg); } - .sk-folding-cube .sk-cube4 { - -webkit-transform: scale(1.1) rotateZ(270deg); - transform: scale(1.1) rotateZ(270deg); } - .sk-folding-cube .sk-cube2:before { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-folding-cube .sk-cube3:before { - -webkit-animation-delay: 0.6s; - animation-delay: 0.6s; } - .sk-folding-cube .sk-cube4:before { - -webkit-animation-delay: 0.9s; - animation-delay: 0.9s; } - -@-webkit-keyframes sk-foldCubeAngle { - 0%, 10% { - -webkit-transform: perspective(140px) rotateX(-180deg); - transform: perspective(140px) rotateX(-180deg); - opacity: 0; } - 25%, 75% { - -webkit-transform: perspective(140px) rotateX(0deg); - transform: perspective(140px) rotateX(0deg); - opacity: 1; } - 90%, 100% { - -webkit-transform: perspective(140px) rotateY(180deg); - transform: perspective(140px) rotateY(180deg); - opacity: 0; } } - -@keyframes sk-foldCubeAngle { - 0%, 10% { - -webkit-transform: perspective(140px) rotateX(-180deg); - transform: perspective(140px) rotateX(-180deg); - opacity: 0; } - 25%, 75% { - -webkit-transform: perspective(140px) rotateX(0deg); - transform: perspective(140px) rotateX(0deg); - opacity: 1; } - 90%, 100% { - -webkit-transform: perspective(140px) rotateY(180deg); - transform: perspective(140px) rotateY(180deg); - opacity: 0; } } From 9e36525f751813078f3e842931291ca07b084d09 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 15:37:33 +0100 Subject: [PATCH 04/38] Add examples file --- examples.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 examples.html diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..ec378d0 --- /dev/null +++ b/examples.html @@ -0,0 +1,61 @@ + + + + 2 double bounce + + + + + +
+
+
+
+ + \ No newline at end of file From 4644fd40398920a163db04633cb3769d61ff48e9 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 16:06:06 +0100 Subject: [PATCH 05/38] Clean up first half of spinners --- examples.html | 100 +++++++++++------------ spinkit.css | 220 +++++++++++++++++++++++++++----------------------- 2 files changed, 166 insertions(+), 154 deletions(-) diff --git a/examples.html b/examples.html index ec378d0..f033a64 100644 --- a/examples.html +++ b/examples.html @@ -1,61 +1,57 @@ - 2 double bounce - - -
-
-
-
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/spinkit.css b/spinkit.css index 99dc713..56f7e1d 100644 --- a/spinkit.css +++ b/spinkit.css @@ -11,7 +11,7 @@ .sk-rotating-plane { width: var(--sk-size); height: var(--sk-size); - background-color: var(--sk-size); + background-color: var(--sk-color); animation: sk-rotate-plane 1.2s infinite ease-in-out; } @@ -27,10 +27,10 @@ /* * Usage: - * +
-
-
+
+
* */ @@ -40,174 +40,197 @@ position: relative; } -.sk-double-bounce .sk-child { +.sk-double-bounce-circle { width: 100%; height: 100%; border-radius: 50%; - background-color: var(--sk-size); + background-color: var(--sk-color); opacity: 0.6; position: absolute; top: 0; left: 0; - animation: sk-doubleBounce 2s infinite ease-in-out; + animation: sk-double-bounce 2s infinite ease-in-out; } - .sk-double-bounce .sk-double-bounce2 { - animation-delay: -1.0s; } +.sk-double-bounce-circle:last-child { + animation-delay: -1.0s; +} -@keyframes sk-doubleBounce { +@keyframes sk-double-bounce { 0%, 100% { - transform: scale(0); } + transform: scale(0); } 50% { - transform: scale(1); } } + transform: scale(1); + } +} /* * Usage: - * +
-
-
-
-
-
+
+
+
+
+
* */ .sk-wave { - margin: 40px auto; width: 50px; height: 40px; text-align: center; - font-size: 10px; } - .sk-wave .sk-rect { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } - .sk-wave .sk-rect1 { - animation-delay: -1.2s; } - .sk-wave .sk-rect2 { - animation-delay: -1.1s; } - .sk-wave .sk-rect3 { - animation-delay: -1s; } - .sk-wave .sk-rect4 { - animation-delay: -0.9s; } - .sk-wave .sk-rect5 { - animation-delay: -0.8s; } + font-size: 10px; +} -@keyframes sk-waveStretchDelay { +.sk-wave-rect { + background-color: var(--sk-color); + height: 100%; + width: 6px; + display: inline-block; + animation: sk-wave 1.2s infinite ease-in-out; +} + +.sk-wave-rect:nth-child(1) { + animation-delay: -1.2s; +} +.sk-wave-rect:nth-child(2) { + animation-delay: -1.1s; +} +.sk-wave-rect:nth-child(3) { + animation-delay: -1s; +} +.sk-wave-rect:nth-child(4) { + animation-delay: -0.9s; +} +.sk-wave-rect:nth-child(5) { + animation-delay: -0.8s; +} + +@keyframes sk-wave { 0%, 40%, 100% { - transform: scaleY(0.4); } - 20% { - transform: scaleY(1); } } + transform: scaleY(0.4); + } 20% { + transform: scaleY(1); +} } /* * Usage: *
-
-
+
+
* */ .sk-wandering-cubes { - margin: 40px auto; - width: 40px; - height: 40px; - position: relative; } - .sk-wandering-cubes .sk-cube { - background-color: #333; - width: 10px; - height: 10px; + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-wandering-cubes-cube { + background-color: var(--sk-color); + width: 25%; + height: 25%; position: absolute; top: 0; left: 0; - animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; } - .sk-wandering-cubes .sk-cube2 { - animation-delay: -0.9s; } - + animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; +} +.sk-wandering-cubes-cube:nth-child(2) { animation-delay: -0.9s; } -@keyframes sk-wanderingCube { +@keyframes sk-wandering-cubes { 0% { - transform: rotate(0deg); } + transform: rotate(0deg); } 25% { - transform: translateX(30px) rotate(-90deg) scale(0.5); } + transform: translateX(30px) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ - transform: translateX(30px) translateY(30px) rotate(-179deg); } + transform: translateX(30px) translateY(30px) rotate(-179deg); } 50.1% { - transform: translateX(30px) translateY(30px) rotate(-180deg); } + transform: translateX(30px) translateY(30px) rotate(-180deg); } 75% { - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } 100% { - transform: rotate(-360deg); } } + transform: rotate(-360deg); + } +} /* * Usage: - * - + +
* */ -.sk-spinner-pulse { - width: 40px; - height: 40px; - margin: 40px auto; - background-color: #333; +.sk-pulse { + width: var(--sk-size); + height: var(--sk-size); + background-color: var(--sk-color); border-radius: 100%; - animation: sk-pulseScaleOut 1s infinite ease-in-out; } + animation: sk-pulse 1s infinite ease-in-out; +} -@keyframes sk-pulseScaleOut { +@keyframes sk-pulse { 0% { - transform: scale(0); } - 100% { - transform: scale(1); - opacity: 0; } } + transform: scale(0); + } 100% { + transform: scale(1); + opacity: 0; + } +} /* * Usage: - * +
-
-
+
+
* */ .sk-chasing-dots { - margin: 40px auto; - width: 40px; - height: 40px; + width: var(--sk-size); + height: var(--sk-size); position: relative; text-align: center; - animation: sk-chasingDotsRotate 2s infinite linear; } - .sk-chasing-dots .sk-child { + animation: sk-chasing-dots 2s infinite linear; +} + +.sk-chasing-dots-dot { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; - background-color: #333; + background-color: var(--sk-color); border-radius: 100%; - animation: sk-chasingDotsBounce 2s infinite ease-in-out; } - .sk-chasing-dots .sk-dot2 { - top: auto; - bottom: 0; - animation-delay: -1s; } + animation: sk-chasing-dots-dot 2s infinite ease-in-out; +} -@keyframes sk-chasingDotsRotate { - 100% { - transform: rotate(360deg); } } +.sk-chasing-dots-dot:nth-child(2) { + top: auto; + bottom: 0; + animation-delay: -1s; +} +@keyframes sk-chasing-dots { + 100% { + transform: rotate(360deg); + } +} -@keyframes sk-chasingDotsBounce { +@keyframes sk-chasing-dots-dot { 0%, 100% { - transform: scale(0); } + transform: scale(0); } 50% { - transform: scale(1); } } + transform: scale(1); + } +} /* * Usage: - * +
@@ -216,7 +239,6 @@ * */ .sk-three-bounce { - margin: 40px auto; width: 80px; text-align: center; } .sk-three-bounce .sk-child { @@ -257,7 +279,6 @@ * */ .sk-circle { - margin: 40px auto; width: 40px; height: 40px; position: relative; } @@ -270,7 +291,6 @@ .sk-circle .sk-child:before { content: ''; display: block; - margin: 0 auto; width: 15%; height: 15%; background-color: #333; @@ -357,7 +377,6 @@ .sk-cube-grid { width: 40px; height: 40px; - margin: 40px auto; /* * Spinner positions * 1 2 3 @@ -415,7 +434,6 @@ * */ .sk-fading-circle { - margin: 40px auto; width: 40px; height: 40px; position: relative; } @@ -428,7 +446,6 @@ .sk-fading-circle .sk-circle:before { content: ''; display: block; - margin: 0 auto; width: 15%; height: 15%; background-color: #333; @@ -508,7 +525,6 @@ * */ .sk-folding-cube { - margin: 40px auto; width: 40px; height: 40px; position: relative; From d32b33fb07942a35aa049700eb82ce468ef98e3d Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 16:39:40 +0100 Subject: [PATCH 06/38] Update last set of spinners --- examples.html | 74 ++++++- spinkit.css | 545 ++++++++++++++++++++++---------------------------- 2 files changed, 313 insertions(+), 306 deletions(-) diff --git a/examples.html b/examples.html index f033a64..668cbda 100644 --- a/examples.html +++ b/examples.html @@ -52,6 +52,78 @@
- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+ \ No newline at end of file diff --git a/spinkit.css b/spinkit.css index 56f7e1d..937246e 100644 --- a/spinkit.css +++ b/spinkit.css @@ -77,8 +77,8 @@ * */ .sk-wave { - width: 50px; - height: 40px; + width: var(--sk-size); + height: var(--sk-size); text-align: center; font-size: 10px; } @@ -86,26 +86,16 @@ .sk-wave-rect { background-color: var(--sk-color); height: 100%; - width: 6px; + width: 15%; display: inline-block; animation: sk-wave 1.2s infinite ease-in-out; } -.sk-wave-rect:nth-child(1) { - animation-delay: -1.2s; -} -.sk-wave-rect:nth-child(2) { - animation-delay: -1.1s; -} -.sk-wave-rect:nth-child(3) { - animation-delay: -1s; -} -.sk-wave-rect:nth-child(4) { - animation-delay: -0.9s; -} -.sk-wave-rect:nth-child(5) { - animation-delay: -0.8s; -} +.sk-wave-rect:nth-child(1) { animation-delay: -1.2s; } +.sk-wave-rect:nth-child(2) { animation-delay: -1.1s; } +.sk-wave-rect:nth-child(3) { animation-delay: -1.0s; } +.sk-wave-rect:nth-child(4) { animation-delay: -0.9s; } +.sk-wave-rect:nth-child(5) { animation-delay: -0.8s; } @keyframes sk-wave { 0%, 40%, 100% { @@ -232,341 +222,286 @@ * Usage:
-
-
-
+
+
+
* */ .sk-three-bounce { - width: 80px; - text-align: center; } - .sk-three-bounce .sk-child { - width: 20px; - height: 20px; - background-color: #333; - border-radius: 100%; - display: inline-block; - animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } - .sk-three-bounce .sk-bounce1 { - animation-delay: -0.32s; } - .sk-three-bounce .sk-bounce2 { - animation-delay: -0.16s; } + width: calc(var(--sk-size) * 1.5); + text-align: center; +} + +.sk-three-bounce-circle { + width: calc(var(--sk-size) / 3); + height: calc(var(--sk-size) / 3); + background-color: var(--sk-color); + border-radius: 100%; + display: inline-block; + animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; +} + +.sk-three-bounce-circle:nth-child(1) { animation-delay: -0.32s; } +.sk-three-bounce-circle:nth-child(2) { animation-delay: -0.16s; } @keyframes sk-three-bounce { 0%, 80%, 100% { - transform: scale(0); } + transform: scale(0); } 40% { - transform: scale(1); } } + transform: scale(1); + } +} /* * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+
+
+
* */ -.sk-circle { - width: 40px; - height: 40px; - position: relative; } - .sk-circle .sk-child { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-circle .sk-child:before { +.sk-circles { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-circles-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-circles-circle:before { content: ''; display: block; width: 15%; height: 15%; - background-color: #333; + background-color: var(--sk-color); border-radius: 100%; - animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; } - .sk-circle .sk-circle2 { - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-circle .sk-circle3 { - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-circle .sk-circle4 { - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-circle .sk-circle5 { - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-circle .sk-circle6 { - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-circle .sk-circle7 { - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-circle .sk-circle8 { - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-circle .sk-circle9 { - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-circle .sk-circle10 { - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-circle .sk-circle11 { - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-circle .sk-circle12 { - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-circle .sk-circle2:before { - animation-delay: -1.1s; } - .sk-circle .sk-circle3:before { - animation-delay: -1s; } - .sk-circle .sk-circle4:before { - animation-delay: -0.9s; } - .sk-circle .sk-circle5:before { - animation-delay: -0.8s; } - .sk-circle .sk-circle6:before { - animation-delay: -0.7s; } - .sk-circle .sk-circle7:before { - animation-delay: -0.6s; } - .sk-circle .sk-circle8:before { - animation-delay: -0.5s; } - .sk-circle .sk-circle9:before { - animation-delay: -0.4s; } - .sk-circle .sk-circle10:before { - animation-delay: -0.3s; } - .sk-circle .sk-circle11:before { - animation-delay: -0.2s; } - .sk-circle .sk-circle12:before { - animation-delay: -0.1s; } - -@keyframes sk-circleBounceDelay { + animation: sk-circles 1.2s infinite ease-in-out both; +} +.sk-circles-circle:nth-child(1) { transform: rotate(30deg); } +.sk-circles-circle:nth-child(2) { transform: rotate(60deg); } +.sk-circles-circle:nth-child(3) { transform: rotate(90deg); } +.sk-circles-circle:nth-child(4) { transform: rotate(120deg); } +.sk-circles-circle:nth-child(5) { transform: rotate(150deg); } +.sk-circles-circle:nth-child(6) { transform: rotate(180deg); } +.sk-circles-circle:nth-child(7) { transform: rotate(210deg); } +.sk-circles-circle:nth-child(8) { transform: rotate(240deg); } +.sk-circles-circle:nth-child(9) { transform: rotate(270deg); } +.sk-circles-circle:nth-child(10) { transform: rotate(300deg); } +.sk-circles-circle:nth-child(11) { transform: rotate(330deg); } +.sk-circles-circle:nth-child(1):before { animation-delay: -1.1s; } +.sk-circles-circle:nth-child(2):before { animation-delay: -1s; } +.sk-circles-circle:nth-child(3):before { animation-delay: -0.9s; } +.sk-circles-circle:nth-child(4):before { animation-delay: -0.8s; } +.sk-circles-circle:nth-child(5):before { animation-delay: -0.7s; } +.sk-circles-circle:nth-child(6):before { animation-delay: -0.6s; } +.sk-circles-circle:nth-child(7):before { animation-delay: -0.5s; } +.sk-circles-circle:nth-child(8):before { animation-delay: -0.4s; } +.sk-circles-circle:nth-child(9):before { animation-delay: -0.3s; } +.sk-circles-circle:nth-child(10):before { animation-delay: -0.2s; } +.sk-circles-circle:nth-child(11):before { animation-delay: -0.1s; } + +@keyframes sk-circles { 0%, 80%, 100% { - transform: scale(0); } + transform: scale(0); } 40% { - transform: scale(1); } } + transform: scale(1); + } +} /* * Usage: * -
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
* */ -.sk-cube-grid { - width: 40px; - height: 40px; +.sk-grid { + width: var(--sk-size); + height: var(--sk-size); /* * Spinner positions * 1 2 3 * 4 5 6 * 7 8 9 - */ } - .sk-cube-grid .sk-cube { + */ + } +.sk-grid-cube { width: 33.33%; height: 33.33%; - background-color: #333; + background-color: var(--sk-color); float: left; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } - .sk-cube-grid .sk-cube1 { - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube2 { - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube3 { - animation-delay: 0.4s; } - .sk-cube-grid .sk-cube4 { - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube5 { - animation-delay: 0.2s; } - .sk-cube-grid .sk-cube6 { - animation-delay: 0.3s; } - .sk-cube-grid .sk-cube7 { - animation-delay: 0.0s; } - .sk-cube-grid .sk-cube8 { - animation-delay: 0.1s; } - .sk-cube-grid .sk-cube9 { - animation-delay: 0.2s; } - -@keyframes sk-cubeGridScaleDelay { + animation: sk-grid 1.3s infinite ease-in-out; +} +.sk-grid-cube:nth-child(1) { animation-delay: 0.2s; } +.sk-grid-cube:nth-child(2) { animation-delay: 0.3s; } +.sk-grid-cube:nth-child(3) { animation-delay: 0.4s; } +.sk-grid-cube:nth-child(4) { animation-delay: 0.1s; } +.sk-grid-cube:nth-child(5) { animation-delay: 0.2s; } +.sk-grid-cube:nth-child(6) { animation-delay: 0.3s; } +.sk-grid-cube:nth-child(7) { animation-delay: 0.0s; } +.sk-grid-cube:nth-child(8) { animation-delay: 0.1s; } +.sk-grid-cube:nth-child(9) { animation-delay: 0.2s; } + +@keyframes sk-grid { 0%, 70%, 100% { - transform: scale3D(1, 1, 1); } - 35% { - transform: scale3D(0, 0, 1); } } + transform: scale3D(1, 1, 1); + } 35% { + transform: scale3D(0, 0, 1); + } +} /* * Usage: - * -
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+
+
+
* */ -.sk-fading-circle { - width: 40px; - height: 40px; - position: relative; } - .sk-fading-circle .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - .sk-fading-circle .sk-circle:before { - content: ''; - display: block; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } - .sk-fading-circle .sk-circle2 { - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - .sk-fading-circle .sk-circle3 { - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - .sk-fading-circle .sk-circle4 { - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - .sk-fading-circle .sk-circle5 { - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - .sk-fading-circle .sk-circle6 { - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - .sk-fading-circle .sk-circle7 { - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - .sk-fading-circle .sk-circle8 { - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - .sk-fading-circle .sk-circle9 { - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - .sk-fading-circle .sk-circle10 { - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - .sk-fading-circle .sk-circle11 { - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - .sk-fading-circle .sk-circle12 { - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - .sk-fading-circle .sk-circle2:before { - animation-delay: -1.1s; } - .sk-fading-circle .sk-circle3:before { - animation-delay: -1s; } - .sk-fading-circle .sk-circle4:before { - animation-delay: -0.9s; } - .sk-fading-circle .sk-circle5:before { - animation-delay: -0.8s; } - .sk-fading-circle .sk-circle6:before { - animation-delay: -0.7s; } - .sk-fading-circle .sk-circle7:before { - animation-delay: -0.6s; } - .sk-fading-circle .sk-circle8:before { - animation-delay: -0.5s; } - .sk-fading-circle .sk-circle9:before { - animation-delay: -0.4s; } - .sk-fading-circle .sk-circle10:before { - animation-delay: -0.3s; } - .sk-fading-circle .sk-circle11:before { - animation-delay: -0.2s; } - .sk-fading-circle .sk-circle12:before { - animation-delay: -0.1s; } - -@keyframes sk-circleFadeDelay { +.sk-circles-fade { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-circles-fade-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} +.sk-circles-fade-circle:before { + content: ''; + display: block; + width: 15%; + height: 15%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-circles-fade 1.2s infinite ease-in-out both; +} + +.sk-circles-fade-circle:nth-child(1) { transform: rotate(30deg); } +.sk-circles-fade-circle:nth-child(2) { transform: rotate(60deg); } +.sk-circles-fade-circle:nth-child(3) { transform: rotate(90deg); } +.sk-circles-fade-circle:nth-child(4) { transform: rotate(120deg); } +.sk-circles-fade-circle:nth-child(5) { transform: rotate(150deg); } +.sk-circles-fade-circle:nth-child(6) { transform: rotate(180deg); } +.sk-circles-fade-circle:nth-child(7) { transform: rotate(210deg); } +.sk-circles-fade-circle:nth-child(8) { transform: rotate(240deg); } +.sk-circles-fade-circle:nth-child(9) { transform: rotate(270deg); } +.sk-circles-fade-circle:nth-child(10) { transform: rotate(300deg); } +.sk-circles-fade-circle:nth-child(11) { transform: rotate(330deg); } +.sk-circles-fade-circle:nth-child(1):before { animation-delay: -1.1s; } +.sk-circles-fade-circle:nth-child(2):before { animation-delay: -1.0s; } +.sk-circles-fade-circle:nth-child(3):before { animation-delay: -0.9s; } +.sk-circles-fade-circle:nth-child(4):before { animation-delay: -0.8s; } +.sk-circles-fade-circle:nth-child(5):before { animation-delay: -0.7s; } +.sk-circles-fade-circle:nth-child(6):before { animation-delay: -0.6s; } +.sk-circles-fade-circle:nth-child(7):before { animation-delay: -0.5s; } +.sk-circles-fade-circle:nth-child(8):before { animation-delay: -0.4s; } +.sk-circles-fade-circle:nth-child(9):before { animation-delay: -0.3s; } +.sk-circles-fade-circle:nth-child(10):before { animation-delay: -0.2s; } +.sk-circles-fade-circle:nth-child(11):before { animation-delay: -0.1s; } + +@keyframes sk-circles-fade { 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } + opacity: 0; + } 40% { + opacity: 1; + } +} /* * Usage: - * -
-
-
-
-
+ +
+
+
+
+
* */ -.sk-folding-cube { - width: 40px; - height: 40px; +.sk-fold { + width: var(--sk-size); + height: var(--sk-size); position: relative; - transform: rotateZ(45deg); } - .sk-folding-cube .sk-cube { - float: left; - width: 50%; - height: 50%; - position: relative; - -ms-transform: scale(1.1); - transform: scale(1.1); } - .sk-folding-cube .sk-cube:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #333; - animation: sk-foldCubeAngle 2.4s infinite linear both; - -ms-transform-origin: 100% 100%; - transform-origin: 100% 100%; } - .sk-folding-cube .sk-cube2 { - transform: scale(1.1) rotateZ(90deg); } - .sk-folding-cube .sk-cube3 { - transform: scale(1.1) rotateZ(180deg); } - .sk-folding-cube .sk-cube4 { - transform: scale(1.1) rotateZ(270deg); } - .sk-folding-cube .sk-cube2:before { - animation-delay: 0.3s; } - .sk-folding-cube .sk-cube3:before { - animation-delay: 0.6s; } - .sk-folding-cube .sk-cube4:before { - animation-delay: 0.9s; } - -@keyframes sk-foldCubeAngle { + transform: rotateZ(45deg); +} +.sk-fold-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + transform: scale(1.1); +} + +.sk-fold-cube:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sk-color); + animation: sk-fold 2.4s infinite linear both; + transform-origin: 100% 100%; +} +.sk-fold-cube:nth-child(2) { transform: scale(1.1) rotateZ(90deg); } +.sk-fold-cube:nth-child(4) { transform: scale(1.1) rotateZ(180deg); } +.sk-fold-cube:nth-child(3) { transform: scale(1.1) rotateZ(270deg); } +.sk-fold-cube:nth-child(2):before { animation-delay: 0.3s; } +.sk-fold-cube:nth-child(4):before { animation-delay: 0.6s; } +.sk-fold-cube:nth-child(3):before { animation-delay: 0.9s; } + +@keyframes sk-fold { 0%, 10% { - transform: perspective(140px) rotateX(-180deg); - opacity: 0; } - 25%, 75% { - transform: perspective(140px) rotateX(0deg); - opacity: 1; } - 90%, 100% { - transform: perspective(140px) rotateY(180deg); - opacity: 0; } } + transform: perspective(140px) rotateX(-180deg); + opacity: 0; + } 25%, 75% { + transform: perspective(140px) rotateX(0deg); + opacity: 1; + } 90%, 100% { + transform: perspective(140px) rotateY(180deg); + opacity: 0; + } +} From 3a83e502d326810e629bf685a67b37a58cb49924 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 16:39:45 +0100 Subject: [PATCH 07/38] Update changelog --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b4ddb8..909abed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# 2.0.0 + +* New: Added examples.html, with an overview of all spinners +* Fixed: All elements now only have one single class +* Fixed: No more dependencies. gulp, npm, node, etc. is not required to build this project. +* Fixed: No more SCSS. All configuration is now done through CSS vars. +* Fixed: All keyframe animations are now named (exactly) after their respective spinners + # 1.2.5 * Fixed: Add folding cube spinner (11) to combined CSS file From 20f3ede766521bd2eab9788c46f37ef5f0e6f6a7 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:12:41 +0100 Subject: [PATCH 08/38] Remove old examples --- examples/1-rotating-plane.html | 49 ---------- examples/10-fading-circle.html | 156 ------------------------------- examples/11-folding-cube.html | 104 --------------------- examples/2-double-bounce.html | 61 ------------ examples/3-wave.html | 76 --------------- examples/4-wandering-cubes.html | 85 ----------------- examples/5-pulse.html | 46 --------- examples/6-chasing-dots.html | 75 --------------- examples/7-three-bounce.html | 62 ------------- examples/8-circle.html | 160 -------------------------------- examples/9-cube-grid.html | 100 -------------------- 11 files changed, 974 deletions(-) delete mode 100644 examples/1-rotating-plane.html delete mode 100644 examples/10-fading-circle.html delete mode 100644 examples/11-folding-cube.html delete mode 100644 examples/2-double-bounce.html delete mode 100644 examples/3-wave.html delete mode 100644 examples/4-wandering-cubes.html delete mode 100644 examples/5-pulse.html delete mode 100644 examples/6-chasing-dots.html delete mode 100644 examples/7-three-bounce.html delete mode 100644 examples/8-circle.html delete mode 100644 examples/9-cube-grid.html diff --git a/examples/1-rotating-plane.html b/examples/1-rotating-plane.html deleted file mode 100644 index 4357808..0000000 --- a/examples/1-rotating-plane.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - 1 rotating plane - - - - - -
- - \ No newline at end of file diff --git a/examples/10-fading-circle.html b/examples/10-fading-circle.html deleted file mode 100644 index 5df235a..0000000 --- a/examples/10-fading-circle.html +++ /dev/null @@ -1,156 +0,0 @@ - - - - 10 fading circle - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/examples/11-folding-cube.html b/examples/11-folding-cube.html deleted file mode 100644 index f6beb61..0000000 --- a/examples/11-folding-cube.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - 11 folding cube - - - - - -
-
-
-
-
-
- - \ No newline at end of file diff --git a/examples/2-double-bounce.html b/examples/2-double-bounce.html deleted file mode 100644 index ec378d0..0000000 --- a/examples/2-double-bounce.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - 2 double bounce - - - - - -
-
-
-
- - \ No newline at end of file diff --git a/examples/3-wave.html b/examples/3-wave.html deleted file mode 100644 index ad4ed19..0000000 --- a/examples/3-wave.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - 3 wave - - - - - -
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/examples/4-wandering-cubes.html b/examples/4-wandering-cubes.html deleted file mode 100644 index f77cb2f..0000000 --- a/examples/4-wandering-cubes.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - 4 wandering cubes - - - - - -
-
-
-
- - \ No newline at end of file diff --git a/examples/5-pulse.html b/examples/5-pulse.html deleted file mode 100644 index 0390ee2..0000000 --- a/examples/5-pulse.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - 5 pulse - - - - - - - - \ No newline at end of file diff --git a/examples/6-chasing-dots.html b/examples/6-chasing-dots.html deleted file mode 100644 index adc63c4..0000000 --- a/examples/6-chasing-dots.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - 6 chasing dots - - - - - -
-
-
-
- - \ No newline at end of file diff --git a/examples/7-three-bounce.html b/examples/7-three-bounce.html deleted file mode 100644 index fc56337..0000000 --- a/examples/7-three-bounce.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - 7 three bounce - - - - - -
-
-
-
-
- - \ No newline at end of file diff --git a/examples/8-circle.html b/examples/8-circle.html deleted file mode 100644 index 028f946..0000000 --- a/examples/8-circle.html +++ /dev/null @@ -1,160 +0,0 @@ - - - - 8 circle - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/examples/9-cube-grid.html b/examples/9-cube-grid.html deleted file mode 100644 index 05578ee..0000000 --- a/examples/9-cube-grid.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - 9 cube grid - - - - - -
-
-
-
-
-
-
-
-
-
-
- - \ No newline at end of file From 9444ce8817de5714c3cc512dd425a654ccafc18f Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:12:53 +0100 Subject: [PATCH 09/38] Clean up readme instructions --- README.md | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/README.md b/README.md index c22c156..d520763 100644 --- a/README.md +++ b/README.md @@ -4,32 +4,7 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi ## Usage -### Regular CSS -Grab the HTML and CSS for a spinner from the example files, or add SpinKit directly to your project with `bower`: - -```bash -$ bower install spinkit -``` - -or npm: - -```bash -$ npm install spinkit -``` - -### SCSS - -If you're using SCSS you can include specific spinners (rather than all of them) by importing them one by one: - -```scss -@import '../bower_components/spinkit/scss/spinners/1-rotating-plane', - '../bower_components/spinkit/scss/spinners/3-wave'; -``` - -You currently need to use an [autoprefixer](https://github.com/postcss/autoprefixer) if you want to support all browsers. If you're compiling your SCSS with gulp you can use [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer), and [grunt-autoprefixer](https://github.com/nDmitry/grunt-autoprefixer) if you use grunt. - -Variables that can be overridden are listed in [scss/_variables.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/_variables.scss). ## Web browser compatibility From 8745e026d3539cd10a68ef33b70e430e1c5f4ea3 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:13:07 +0100 Subject: [PATCH 10/38] Clean up contribution guidelines --- CONTRIBUTING.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 08de606..f597953 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,15 +1,12 @@ # Pull Request Guidelines -We all love Pull Requests so if you have something you'd like to share with the community we'd be happy to help you out with contributing. But before you create your PR please read and understand the following. :heart: +If you have something you'd like to share with the community we'd be happy to help you out with contributing. Before you create your PR please read and understand the following. :heart: ## Code -If you're submitting a new animation, make sure that it looks identical in [all browsers that support CSS animations](http://caniuse.com/css-animation). - -The animation styles should be put in a [SCSS](http://sass-lang.com/) file which you place in [scss/spinners/](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinners). It must also be imported in [scss/spinkit.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinkit.scss). Carefully look at the existing spinners to make sure you follow the same conventions and that you list an example on top of the page exactly like the other spinners (we extract this when generating the HTML files). Don't use any browser prefixes as this will be added automatically to the generated CSS files by [autoprefixer](https://github.com/postcss/autoprefixer). - -To generate the CSS and HTML files you need to have [node.js](http://nodejs.org/) installed on your system. After that you need to issue `npm install` from the SpinKit project directory to install [gulp](https://github.com/gulpjs/gulp) and other dependencies listed in `package.json`. After doing this you should be able to just call `gulp build` to generate the files. These files should be included in your pull requests. - +- Keep it lean. Please refrain from adding libraries or dependencies, unless you really need to. +- If you're submitting a new animation for review, make sure that the spinner looks identical in [all browsers that support CSS animations](http://caniuse.com/css-animation). +- Use the `--sk-size` and `--sk-color` CSS variables in your spinners, to that it can be configured globally along with all other spinners. ## Style From 7b2c14bc4c090380ffa2db82a688802a3bd651de Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:13:13 +0100 Subject: [PATCH 11/38] Update changelog --- CHANGELOG.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 909abed..f23a5c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,11 @@ # 2.0.0 * New: Added examples.html, with an overview of all spinners -* Fixed: All elements now only have one single class -* Fixed: No more dependencies. gulp, npm, node, etc. is not required to build this project. -* Fixed: No more SCSS. All configuration is now done through CSS vars. -* Fixed: All keyframe animations are now named (exactly) after their respective spinners +* Changed: No positioning is now applied by default on any of the spinners. +* Changed: All elements now only have one single class. +* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. +* Changed: No more SCSS. All configuration is now done through CSS vars. +* Fixed: All keyframe animations are now named (exactly) after their respective spinners. # 1.2.5 From 22bc20b0067594397a9f1da91106d180fe1b4130 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:17:11 +0100 Subject: [PATCH 12/38] Add spinkit.min.css --- spinkit.min.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 spinkit.min.css diff --git a/spinkit.min.css b/spinkit.min.css new file mode 100644 index 0000000..791240a --- /dev/null +++ b/spinkit.min.css @@ -0,0 +1 @@ +:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotate-plane 1.2s infinite ease-in-out}@keyframes sk-rotate-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);text-align:center;font-size:10px}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;display:inline-block;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(30px) rotate(-90deg) scale(0.5)}50%{transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0}40%{opacity:1}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}} From 973278669b968dab834edbbd485151d344dd0fb8 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:23:29 +0100 Subject: [PATCH 13/38] Clean up readme --- README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d520763..2ebb071 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,23 @@ # [SpinKit](http://tobiasahlin.com/spinkit/) -Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit uses hardware accelerated (`translate` and `opacity`) CSS animations to create smooth and easily customizable animations. +Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spinkit/). SpinKit only uses (`transform` and `opacity`) CSS animations to create smooth and easily customizable animations. ## Usage - +- Add `spinkit.css` or `spinkit.min.css` to your project +- Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` +- Configure the spinner through the CSS variables `--sk-size` (spinner width & height) and `--sk-color` (spinner color) ## Web browser compatibility -CSS animations are supported in the latest version of all major browsers, and browsers with `animation` support make up [almost 90% of all usage](http://caniuse.com/#feat=css-animation). If you need to support IE9 and below, however, this section is for you. +SpinKit uses CSS animations and variables: + +- CSS keyframes animations [are at +96.5% global support](http://caniuse.com/#feat=css-animation) +- CSS variables [are at +91.8% global support](https://caniuse.com/#feat=css-variables) ### Implementing a fallback spinner -How do you know if you need to provide a fallback? You can easily check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported: +How do you know if you need to provide a fallback? You can check for animation support with [Modernizr](http://modernizr.com), or manually check for the `animation` property, and replace the spinner with a GIF if it's not supported: ```javascript function browserSupportsCSSProperty(propertyName) { From 6c571ece619bc2cbd8c35174a9283997562e823e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:30:43 +0100 Subject: [PATCH 14/38] Fix #139 by moving to flexbox --- spinkit.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/spinkit.css b/spinkit.css index 937246e..5900d34 100644 --- a/spinkit.css +++ b/spinkit.css @@ -79,15 +79,14 @@ .sk-wave { width: var(--sk-size); height: var(--sk-size); - text-align: center; - font-size: 10px; + display: flex; + justify-content: space-between; } .sk-wave-rect { background-color: var(--sk-color); height: 100%; width: 15%; - display: inline-block; animation: sk-wave 1.2s infinite ease-in-out; } From 987462d9b6fb8d5d308d979899839455fab74800 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:30:53 +0100 Subject: [PATCH 15/38] Update changelog to mention minified CSS --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f23a5c5..ebacb9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # 2.0.0 * New: Added examples.html, with an overview of all spinners +* New: Added spinkit.min.css, for minified CSS * Changed: No positioning is now applied by default on any of the spinners. * Changed: All elements now only have one single class. * Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. From 22569a88e0f186c68400b46f877bc6bea96addcf Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:39:37 +0100 Subject: [PATCH 16/38] Update minified version --- spinkit.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spinkit.min.css b/spinkit.min.css index 791240a..61f180c 100644 --- a/spinkit.min.css +++ b/spinkit.min.css @@ -1 +1 @@ -:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotate-plane 1.2s infinite ease-in-out}@keyframes sk-rotate-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);text-align:center;font-size:10px}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;display:inline-block;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(30px) rotate(-90deg) scale(0.5)}50%{transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0}40%{opacity:1}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}} +:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotate-plane 1.2s infinite ease-in-out}@keyframes sk-rotate-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(30px) rotate(-90deg) scale(0.5)}50%{transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0}40%{opacity:1}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}} From 1f136050cc419fdb2717e6cc4159141e7f32dbb6 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:43:37 +0100 Subject: [PATCH 17/38] Use relative positioning in wander cubes animation --- spinkit.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/spinkit.css b/spinkit.css index 5900d34..25f7063 100644 --- a/spinkit.css +++ b/spinkit.css @@ -125,6 +125,7 @@ position: absolute; top: 0; left: 0; + --sk-wander-distance: calc(var(--sk-size) * 0.75); animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; } .sk-wandering-cubes-cube:nth-child(2) { animation-delay: -0.9s; } @@ -133,14 +134,14 @@ 0% { transform: rotate(0deg); } 25% { - transform: translateX(30px) rotate(-90deg) scale(0.5); } + transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ - transform: translateX(30px) translateY(30px) rotate(-179deg); } + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); } 50.1% { - transform: translateX(30px) translateY(30px) rotate(-180deg); } + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); } 75% { - transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); } + transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); } From 69074b6040add32c2b95a75a3ae003021ae96cc9 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:46:23 +0100 Subject: [PATCH 18/38] Formatting --- spinkit.css | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/spinkit.css b/spinkit.css index 25f7063..81fd6a7 100644 --- a/spinkit.css +++ b/spinkit.css @@ -12,10 +12,10 @@ width: var(--sk-size); height: var(--sk-size); background-color: var(--sk-color); - animation: sk-rotate-plane 1.2s infinite ease-in-out; + animation: sk-rotating-plane 1.2s infinite ease-in-out; } -@keyframes sk-rotate-plane { +@keyframes sk-rotating-plane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { @@ -119,14 +119,14 @@ } .sk-wandering-cubes-cube { - background-color: var(--sk-color); - width: 25%; - height: 25%; - position: absolute; - top: 0; - left: 0; - --sk-wander-distance: calc(var(--sk-size) * 0.75); - animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; + background-color: var(--sk-color); + width: 25%; + height: 25%; + position: absolute; + top: 0; + left: 0; + --sk-wander-distance: calc(var(--sk-size) * 0.75); + animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; } .sk-wandering-cubes-cube:nth-child(2) { animation-delay: -0.9s; } @@ -188,14 +188,14 @@ } .sk-chasing-dots-dot { - width: 60%; - height: 60%; - display: inline-block; - position: absolute; - top: 0; - background-color: var(--sk-color); - border-radius: 100%; - animation: sk-chasing-dots-dot 2s infinite ease-in-out; + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-chasing-dots-dot 2s infinite ease-in-out; } .sk-chasing-dots-dot:nth-child(2) { From 485f4ab32aba9a060515f7cbc4ff857a986c68d7 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 17:47:33 +0100 Subject: [PATCH 19/38] Bump version number to 2.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c04fe4a..bf35119 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spinkit", - "version": "1.2.5", + "version": "2.0.0", "description": "A collection of loading indicators animated with CSS", "keywords": [ "css", From 77e1cb9e007e82a37235414173803128236df70b Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 21:23:23 +0100 Subject: [PATCH 20/38] Add chase spinner --- examples.html | 9 ++++++- spinkit.css | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/examples.html b/examples.html index 668cbda..f400aa5 100644 --- a/examples.html +++ b/examples.html @@ -118,7 +118,14 @@
- +
+
+
+
+
+
+
+
diff --git a/spinkit.css b/spinkit.css index 81fd6a7..f35339a 100644 --- a/spinkit.css +++ b/spinkit.css @@ -505,3 +505,74 @@ opacity: 0; } } + +/* + * Usage: + +
+
+
+
+
+
+
+
+
+
+ * + */ +.sk-chase { + width: var(--sk-size); + height: var(--sk-size); + position: relative; + animation: sk-chase 2.5s infinite linear both; +} +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2.0s infinite ease-in-out both; +} +.sk-chase-dot:before { + content: ''; + display: block; + width: 25%; + height: 25%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-chase-dot-before 2.0s infinite ease-in-out both; +} +.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } +.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } + +@keyframes sk-chase { + 100% { + transform: rotate(360deg); + } +} + +@keyframes sk-chase-dot { + 80%, 100% { + transform: rotate(360deg); + } +} + +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } 100%, 0% { + transform: scale(1.0); + } +} From 64dec714a633ba00c46e920f1dc0a564c32b990e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 21:29:36 +0100 Subject: [PATCH 21/38] Tweak Circles Fade to have a tail --- spinkit.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/spinkit.css b/spinkit.css index f35339a..bb2043d 100644 --- a/spinkit.css +++ b/spinkit.css @@ -377,7 +377,7 @@ } } -/* +/* Circles Fade * Usage:
@@ -444,9 +444,11 @@ @keyframes sk-circles-fade { 0%, 39%, 100% { - opacity: 0; + opacity: 0; + transform: scale(0.6); } 40% { opacity: 1; + transform: scale(1); } } From 005f85fcf4e95ae7ce6d85ef093e78d423ea665f Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 21:41:36 +0100 Subject: [PATCH 22/38] Move up chase in example lst --- examples.html | 26 +++++++++++--------------- spinkit.css | 2 +- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/examples.html b/examples.html index f400aa5..47647b3 100644 --- a/examples.html +++ b/examples.html @@ -17,6 +17,17 @@
+
+
+
+
+
+
+
+
+
+
+
@@ -117,20 +128,5 @@
-
-
-
-
-
-
-
-
-
-
- -
- -
- \ No newline at end of file diff --git a/spinkit.css b/spinkit.css index bb2043d..bb4c1ad 100644 --- a/spinkit.css +++ b/spinkit.css @@ -230,7 +230,7 @@ */ .sk-three-bounce { width: calc(var(--sk-size) * 1.5); - text-align: center; + text-align: center; } .sk-three-bounce-circle { From 2dc354effa5841c9c94269cdb2fde1b5f5e90ba5 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Sun, 27 Oct 2019 21:50:14 +0100 Subject: [PATCH 23/38] Update dist --- spinkit.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spinkit.min.css b/spinkit.min.css index 61f180c..2723bef 100644 --- a/spinkit.min.css +++ b/spinkit.min.css @@ -1 +1 @@ -:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotate-plane 1.2s infinite ease-in-out}@keyframes sk-rotate-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(30px) rotate(-90deg) scale(0.5)}50%{transform:translateX(30px) translateY(30px) rotate(-179deg)}50.1%{transform:translateX(30px) translateY(30px) rotate(-180deg)}75%{transform:translateX(0) translateY(30px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0}40%{opacity:1}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}} +:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotating-plane 1.2s infinite ease-in-out}@keyframes sk-rotating-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}} From 77b973ff9161f1987f58534252013ce152a503ef Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 08:59:10 +0100 Subject: [PATCH 24/38] Clean up non-essential files --- .editorconfig | 17 ----------------- CONTRIBUTING.md | 19 ------------------- 2 files changed, 36 deletions(-) delete mode 100644 .editorconfig delete mode 100644 CONTRIBUTING.md diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index b6ac2ea..0000000 --- a/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# EditorConfig helps developers define and maintain consistent -# coding styles between different editors and IDEs -# editorconfig.org - -root = true - -[*] -indent_style = space -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true -indent_size = 2 - -[*.md] -trim_trailing_whitespace = false -indent_size = 4 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index f597953..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,19 +0,0 @@ -# Pull Request Guidelines - -If you have something you'd like to share with the community we'd be happy to help you out with contributing. Before you create your PR please read and understand the following. :heart: - -## Code - -- Keep it lean. Please refrain from adding libraries or dependencies, unless you really need to. -- If you're submitting a new animation for review, make sure that the spinner looks identical in [all browsers that support CSS animations](http://caniuse.com/css-animation). -- Use the `--sk-size` and `--sk-color` CSS variables in your spinners, to that it can be configured globally along with all other spinners. - -## Style - -Following the same code style makes all of our lives a bit easier, currently we ask that you use: - -- 2 spaces for indenting -- No trailing spaces -- One trailing newline at the end of each file - -If you use Sublime Text (or any other editor with the same capability) you can install EditorConfig (through [Sublime Package Control](https://sublime.wbond.net/installation)), which will pick up our project's `.editorconfig` and make your file conform to above rules on each save. From 020eb33d5b20288a78f9330af2798a550b9263c1 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 08:59:20 +0100 Subject: [PATCH 25/38] Add my last name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bf35119..632695a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "type": "git", "url": "https://github.com/tobiasahlin/SpinKit.git" }, - "author": "Tobias Ahlin", + "author": "Tobias Ahlin Bjerrome", "license": "MIT", "bugs": { "url": "https://github.com/tobiasahlin/SpinKit/issues" From 35b334b8a2325ae09722cb0fd519eef1f9103ed0 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 08:59:32 +0100 Subject: [PATCH 26/38] Add html snippets for all spinners to readme --- README.md | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 147 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2ebb071..f675765 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,154 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi ## Usage -- Add `spinkit.css` or `spinkit.min.css` to your project +- Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need) - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` -- Configure the spinner through the CSS variables `--sk-size` (spinner width & height) and `--sk-color` (spinner color) +- Configure the spinner through the CSS variables `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. + +## Spinners + +Given that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners: + +### Rotating plane + +```html +
+``` + +### Double Bounce + +```html +
+
+
+
+``` + +### Wave + +```html +
+
+
+
+
+
+
+ ``` + +### Wandering Cubes + +```html +
+
+
+
+``` + +### Pulse + +```html +
+``` + +### Chasing Dots (not chase) + +```html +
+
+
+
+``` + +### Three Bounce + +```html +
+
+
+
+
+``` + +### Circles + +```html +
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +### Grid + +```html +
+
+
+
+
+
+
+
+
+
+
+``` + +### Circles Fade + +```html +
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +### Fold + +```html +
+
+
+
+
+
+``` + +### Chase + +```html +
+
+
+
+
+
+
+
+
+
+``` ## Web browser compatibility From 6b9caa57637f36df47b737badcaa5b0f94ff8d3c Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:08:29 +0100 Subject: [PATCH 27/38] Syntax --- spinkit.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/spinkit.css b/spinkit.css index bb4c1ad..ecb7e45 100644 --- a/spinkit.css +++ b/spinkit.css @@ -132,19 +132,19 @@ @keyframes sk-wandering-cubes { 0% { - transform: rotate(0deg); } - 25% { - transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5); } - 50% { + transform: rotate(0deg); + } 25% { + transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5); + } 50% { /* Hack to make FF rotate in the right direction */ - transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); } - 50.1% { - transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); } - 75% { - transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5); } - 100% { + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); + } 50.1% { + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); + } 75% { + transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5); + } 100% { transform: rotate(-360deg); - } + } } /* From c5f17d4ce64551c7481d394a9827136dc749ac11 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:11:22 +0100 Subject: [PATCH 28/38] Tweak chasing dots (now "swing") --- examples.html | 6 +++--- spinkit.css | 31 ++++++++++++++++--------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/examples.html b/examples.html index 47647b3..a080990 100644 --- a/examples.html +++ b/examples.html @@ -57,9 +57,9 @@
-
-
-
+
+
+
diff --git a/spinkit.css b/spinkit.css index ecb7e45..0701b32 100644 --- a/spinkit.css +++ b/spinkit.css @@ -173,46 +173,47 @@ /* * Usage: -
-
-
+
+
+
* */ -.sk-chasing-dots { +.sk-swing { width: var(--sk-size); height: var(--sk-size); position: relative; - text-align: center; - animation: sk-chasing-dots 2s infinite linear; + animation: sk-swing 1.8s infinite linear; } -.sk-chasing-dots-dot { - width: 60%; - height: 60%; - display: inline-block; +.sk-swing-dot { + width: 45%; + height: 45%; position: absolute; top: 0; + left: 0; + right: 0; + margin: auto; background-color: var(--sk-color); border-radius: 100%; - animation: sk-chasing-dots-dot 2s infinite ease-in-out; + animation: sk-swing-dot 2s infinite ease-in-out; } -.sk-chasing-dots-dot:nth-child(2) { +.sk-swing-dot:nth-child(2) { top: auto; bottom: 0; animation-delay: -1s; } -@keyframes sk-chasing-dots { +@keyframes sk-swing { 100% { transform: rotate(360deg); } } -@keyframes sk-chasing-dots-dot { +@keyframes sk-swing-dot { 0%, 100% { - transform: scale(0); } + transform: scale(0.2); } 50% { transform: scale(1); } From 7792f3082a0055be47f2a2b344237b76e61fcff2 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:12:03 +0100 Subject: [PATCH 29/38] Update example for swing spinner --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f675765..87a1a04 100644 --- a/README.md +++ b/README.md @@ -54,12 +54,12 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
``` -### Chasing Dots (not chase) +### Swing ```html -
-
-
+
+
+
``` From babc50b3ab05c55ee9cb650d190802bb9859e9c2 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:15:21 +0100 Subject: [PATCH 30/38] Use flex (and not inline block) --- spinkit.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spinkit.css b/spinkit.css index 0701b32..b1bb63a 100644 --- a/spinkit.css +++ b/spinkit.css @@ -231,7 +231,8 @@ */ .sk-three-bounce { width: calc(var(--sk-size) * 1.5); - text-align: center; + display: flex; + justify-content: space-between; } .sk-three-bounce-circle { @@ -239,7 +240,6 @@ height: calc(var(--sk-size) / 3); background-color: var(--sk-color); border-radius: 100%; - display: inline-block; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } From 00933d7bcc322af266830b34622c70730378d11c Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:15:39 +0100 Subject: [PATCH 31/38] Make three bounce dots not dissappear completely to keep the visual structure of the spinner --- spinkit.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spinkit.css b/spinkit.css index b1bb63a..0a2842e 100644 --- a/spinkit.css +++ b/spinkit.css @@ -248,7 +248,7 @@ @keyframes sk-three-bounce { 0%, 80%, 100% { - transform: scale(0); } + transform: scale(0.25); } 40% { transform: scale(1); } From 80d0c5aa99d96ba7dc7b44c3c55899cef58b8be2 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 09:49:43 +0100 Subject: [PATCH 32/38] Rework wander spinner --- README.md | 7 ++++--- examples.html | 7 ++++--- spinkit.css | 30 ++++++++++++++++-------------- spinkit.min.css | 2 +- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 87a1a04..69dba72 100644 --- a/README.md +++ b/README.md @@ -42,9 +42,10 @@ Given that you have included `spinkit.min.css` in your project, these snippets w ### Wandering Cubes ```html -
-
-
+
+
+
+
``` diff --git a/examples.html b/examples.html index a080990..12f6773 100644 --- a/examples.html +++ b/examples.html @@ -46,9 +46,10 @@
-
-
-
+
+
+
+
diff --git a/spinkit.css b/spinkit.css index 0a2842e..28e3c87 100644 --- a/spinkit.css +++ b/spinkit.css @@ -106,42 +106,44 @@ /* * Usage: * -
-
-
+
+
+
+
+
* */ -.sk-wandering-cubes { +.sk-wander { width: var(--sk-size); height: var(--sk-size); position: relative; } -.sk-wandering-cubes-cube { +.sk-wander-cube { background-color: var(--sk-color); - width: 25%; - height: 25%; + width: 20%; + height: 20%; position: absolute; top: 0; left: 0; --sk-wander-distance: calc(var(--sk-size) * 0.75); - animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; + animation: sk-wander 2.0s ease-in-out -2.0s infinite both; } -.sk-wandering-cubes-cube:nth-child(2) { animation-delay: -0.9s; } +.sk-wander-cube:nth-child(2) { animation-delay: -0.5s; } +.sk-wander-cube:nth-child(3) { animation-delay: -1.0s; } -@keyframes sk-wandering-cubes { +@keyframes sk-wander { 0% { transform: rotate(0deg); } 25% { - transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5); - } 50% { - /* Hack to make FF rotate in the right direction */ + transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6); + } 50% { /* Make FF rotate in the right direction */ transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); } 50.1% { transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); } 75% { - transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6); } 100% { transform: rotate(-360deg); } diff --git a/spinkit.min.css b/spinkit.min.css index 2723bef..690b662 100644 --- a/spinkit.min.css +++ b/spinkit.min.css @@ -1 +1 @@ -:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotating-plane 1.2s infinite ease-in-out}@keyframes sk-rotating-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wandering-cubes{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wandering-cubes-cube{background-color:var(--sk-color);width:25%;height:25%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both}.sk-wandering-cubes-cube:nth-child(2){animation-delay:-0.9s}@keyframes sk-wandering-cubes{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.5)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-chasing-dots{width:var(--sk-size);height:var(--sk-size);position:relative;text-align:center;animation:sk-chasing-dots 2s infinite linear}.sk-chasing-dots-dot{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:var(--sk-color);border-radius:100%;animation:sk-chasing-dots-dot 2s infinite ease-in-out}.sk-chasing-dots-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasing-dots{100%{transform:rotate(360deg)}}@keyframes sk-chasing-dots-dot{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);text-align:center}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;display:inline-block;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}} +:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotating-plane 1.2s infinite ease-in-out}@keyframes sk-rotating-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wander{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wander-cube{background-color:var(--sk-color);width:20%;height:20%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wander 2.0s ease-in-out -2.0s infinite both}.sk-wander-cube:nth-child(2){animation-delay:-0.5s}.sk-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-swing{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear}.sk-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--sk-color);border-radius:100%;animation:sk-swing-dot 2s infinite ease-in-out}.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{100%{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);display:flex;justify-content:space-between}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0.25)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}} From 5edd0f63ea408715a50817906f5ce26dc76b573f Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 10:36:30 +0100 Subject: [PATCH 33/38] Rename and reorder spinners --- CHANGELOG.md | 9 +- README.md | 124 +++++------ examples.html | 88 ++++---- spinkit.css | 587 +++++++++++++++++++++++++------------------------- 4 files changed, 400 insertions(+), 408 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ebacb9d..0255254 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,15 @@ # 2.0.0 * New: Added examples.html, with an overview of all spinners -* New: Added spinkit.min.css, for minified CSS +* New: Added a brand new chase spinner +* New: Added spinkit.min.css +* Fixed: `inline-block` is no longed used to position any spinners (decoupling spacing from any potential font effects) +* Changed: Most spinners now have more distinct and shorter names * Changed: No positioning is now applied by default on any of the spinners. * Changed: All elements now only have one single class. -* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. +* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build. * Changed: No more SCSS. All configuration is now done through CSS vars. -* Fixed: All keyframe animations are now named (exactly) after their respective spinners. +* Fixed: All keyframe animations are now named after the elements/classes that are using them. # 1.2.5 diff --git a/README.md b/README.md index 69dba72..14862e8 100644 --- a/README.md +++ b/README.md @@ -12,18 +12,33 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi Given that you have included `spinkit.min.css` in your project, these snippets will produce the different spinners: -### Rotating plane +### Plane ```html -
+
``` -### Double Bounce +### Chase ```html -
-
-
+
+
+
+
+
+
+
+
+
+
+``` + +### Bounce + +```html +
+
+
``` @@ -39,20 +54,20 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
``` -### Wandering Cubes +### Pulse ```html -
-
-
-
-
+
``` -### Pulse +### Flow ```html -
+
+
+
+
+
``` ### Swing @@ -64,32 +79,41 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
``` -### Three Bounce +### Circle ```html -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
``` -### Circles +### Circles Fade ```html -
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
``` @@ -109,25 +133,6 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
``` -### Circles Fade - -```html -
-
-
-
-
-
-
-
-
-
-
-
-
-
-``` - ### Fold ```html @@ -139,18 +144,13 @@ Given that you have included `spinkit.min.css` in your project, these snippets w
``` -### Chase +### Wander ```html -
-
-
-
-
-
-
-
-
+
+
+
+
``` diff --git a/examples.html b/examples.html index 12f6773..139c4df 100644 --- a/examples.html +++ b/examples.html @@ -14,7 +14,7 @@
-
+
@@ -29,9 +29,9 @@
-
-
-
+
+
+
@@ -46,15 +46,15 @@
-
-
-
-
-
+
-
+
+
+
+
+
@@ -65,27 +65,36 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -103,23 +112,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -129,5 +121,13 @@
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/spinkit.css b/spinkit.css index 28e3c87..d0273d6 100644 --- a/spinkit.css +++ b/spinkit.css @@ -1,21 +1,22 @@ -/* Preferences */ +/* Config */ :root { --sk-size: 40px; --sk-color: #333; } -/* Usage: -
+/* Plane + +
*/ -.sk-rotating-plane { +.sk-plane { width: var(--sk-size); height: var(--sk-size); background-color: var(--sk-color); - animation: sk-rotating-plane 1.2s infinite ease-in-out; + animation: sk-plane 1.2s infinite ease-in-out; } -@keyframes sk-rotating-plane { +@keyframes sk-plane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { @@ -25,22 +26,90 @@ } } -/* - * Usage: -
-
-
+/* Chase + +
+
+
+
+
+
+
+
+
- * */ -.sk-double-bounce { +.sk-chase { + width: var(--sk-size); + height: var(--sk-size); + position: relative; + animation: sk-chase 2.5s infinite linear both; +} + +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2.0s infinite ease-in-out both; +} + +.sk-chase-dot:before { + content: ''; + display: block; + width: 25%; + height: 25%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-chase-dot-before 2.0s infinite ease-in-out both; +} + +.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } +.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } + +@keyframes sk-chase { + 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot { + 80%, 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } 100%, 0% { + transform: scale(1.0); + } +} + + +/* Bounce + +
+
+
+
+ */ +.sk-bounce { width: var(--sk-size); height: var(--sk-size); position: relative; } -.sk-double-bounce-circle { +.sk-bounce-dot { width: 100%; height: 100%; border-radius: 50%; @@ -49,23 +118,21 @@ position: absolute; top: 0; left: 0; - animation: sk-double-bounce 2s infinite ease-in-out; + animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); } -.sk-double-bounce-circle:last-child { - animation-delay: -1.0s; -} +.sk-bounce-dot:nth-child(2) { animation-delay: -1.0s; } -@keyframes sk-double-bounce { +@keyframes sk-bounce { 0%, 100% { - transform: scale(0); } - 50% { + transform: scale(0); + } 45%, 55% { transform: scale(1); } } -/* - * Usage: + +/* Wave
@@ -74,7 +141,6 @@
- * */ .sk-wave { width: var(--sk-size); @@ -101,66 +167,20 @@ transform: scaleY(0.4); } 20% { transform: scaleY(1); -} } - -/* - * Usage: - * -
-
-
-
-
-
- * - */ -.sk-wander { - width: var(--sk-size); - height: var(--sk-size); - position: relative; -} - -.sk-wander-cube { - background-color: var(--sk-color); - width: 20%; - height: 20%; - position: absolute; - top: 0; - left: 0; - --sk-wander-distance: calc(var(--sk-size) * 0.75); - animation: sk-wander 2.0s ease-in-out -2.0s infinite both; + } } -.sk-wander-cube:nth-child(2) { animation-delay: -0.5s; } -.sk-wander-cube:nth-child(3) { animation-delay: -1.0s; } -@keyframes sk-wander { - 0% { - transform: rotate(0deg); - } 25% { - transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6); - } 50% { /* Make FF rotate in the right direction */ - transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); - } 50.1% { - transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); - } 75% { - transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6); - } 100% { - transform: rotate(-360deg); - } -} -/* - * Usage: +/* Pulse
- * */ .sk-pulse { width: var(--sk-size); height: var(--sk-size); background-color: var(--sk-color); border-radius: 100%; - animation: sk-pulse 1s infinite ease-in-out; + animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes sk-pulse { @@ -172,14 +192,47 @@ } } -/* - * Usage: + +/* Flow + +
+
+
+
+
+ */ +.sk-flow { + width: calc(var(--sk-size) * 1.3); + display: flex; + justify-content: space-between; +} + +.sk-flow-dot { + width: calc(var(--sk-size) / 3); + height: calc(var(--sk-size) / 3); + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both; +} + +.sk-flow-dot:nth-child(1) { animation-delay: -0.30s; } +.sk-flow-dot:nth-child(2) { animation-delay: -0.15s; } + +@keyframes sk-flow { + 0%, 80%, 100% { + transform: scale(0.3); } + 40% { + transform: scale(1); + } +} + + +/* Swing
- * */ .sk-swing { width: var(--sk-size); @@ -221,107 +274,72 @@ } } -/* - * Usage: - -
-
-
-
-
- * - */ -.sk-three-bounce { - width: calc(var(--sk-size) * 1.5); - display: flex; - justify-content: space-between; -} - -.sk-three-bounce-circle { - width: calc(var(--sk-size) / 3); - height: calc(var(--sk-size) / 3); - background-color: var(--sk-color); - border-radius: 100%; - animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; -} - -.sk-three-bounce-circle:nth-child(1) { animation-delay: -0.32s; } -.sk-three-bounce-circle:nth-child(2) { animation-delay: -0.16s; } -@keyframes sk-three-bounce { - 0%, 80%, 100% { - transform: scale(0.25); } - 40% { - transform: scale(1); - } -} +/* Circle -/* - * Usage: - -
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- * */ -.sk-circles { +.sk-circle { width: var(--sk-size); height: var(--sk-size); position: relative; } -.sk-circles-circle { +.sk-circle-dot { width: 100%; height: 100%; position: absolute; left: 0; - top: 0; + top: 0; } -.sk-circles-circle:before { +.sk-circle-dot:before { content: ''; display: block; width: 15%; height: 15%; background-color: var(--sk-color); border-radius: 100%; - animation: sk-circles 1.2s infinite ease-in-out both; -} -.sk-circles-circle:nth-child(1) { transform: rotate(30deg); } -.sk-circles-circle:nth-child(2) { transform: rotate(60deg); } -.sk-circles-circle:nth-child(3) { transform: rotate(90deg); } -.sk-circles-circle:nth-child(4) { transform: rotate(120deg); } -.sk-circles-circle:nth-child(5) { transform: rotate(150deg); } -.sk-circles-circle:nth-child(6) { transform: rotate(180deg); } -.sk-circles-circle:nth-child(7) { transform: rotate(210deg); } -.sk-circles-circle:nth-child(8) { transform: rotate(240deg); } -.sk-circles-circle:nth-child(9) { transform: rotate(270deg); } -.sk-circles-circle:nth-child(10) { transform: rotate(300deg); } -.sk-circles-circle:nth-child(11) { transform: rotate(330deg); } -.sk-circles-circle:nth-child(1):before { animation-delay: -1.1s; } -.sk-circles-circle:nth-child(2):before { animation-delay: -1s; } -.sk-circles-circle:nth-child(3):before { animation-delay: -0.9s; } -.sk-circles-circle:nth-child(4):before { animation-delay: -0.8s; } -.sk-circles-circle:nth-child(5):before { animation-delay: -0.7s; } -.sk-circles-circle:nth-child(6):before { animation-delay: -0.6s; } -.sk-circles-circle:nth-child(7):before { animation-delay: -0.5s; } -.sk-circles-circle:nth-child(8):before { animation-delay: -0.4s; } -.sk-circles-circle:nth-child(9):before { animation-delay: -0.3s; } -.sk-circles-circle:nth-child(10):before { animation-delay: -0.2s; } -.sk-circles-circle:nth-child(11):before { animation-delay: -0.1s; } - -@keyframes sk-circles { + animation: sk-circle 1.2s infinite ease-in-out both; +} + +.sk-circle-dot:nth-child(1) { transform: rotate(30deg); } +.sk-circle-dot:nth-child(2) { transform: rotate(60deg); } +.sk-circle-dot:nth-child(3) { transform: rotate(90deg); } +.sk-circle-dot:nth-child(4) { transform: rotate(120deg); } +.sk-circle-dot:nth-child(5) { transform: rotate(150deg); } +.sk-circle-dot:nth-child(6) { transform: rotate(180deg); } +.sk-circle-dot:nth-child(7) { transform: rotate(210deg); } +.sk-circle-dot:nth-child(8) { transform: rotate(240deg); } +.sk-circle-dot:nth-child(9) { transform: rotate(270deg); } +.sk-circle-dot:nth-child(10) { transform: rotate(300deg); } +.sk-circle-dot:nth-child(11) { transform: rotate(330deg); } +.sk-circle-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-circle-dot:nth-child(2):before { animation-delay: -1s; } +.sk-circle-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-circle-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-circle-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-circle-dot:nth-child(6):before { animation-delay: -0.6s; } +.sk-circle-dot:nth-child(7):before { animation-delay: -0.5s; } +.sk-circle-dot:nth-child(8):before { animation-delay: -0.4s; } +.sk-circle-dot:nth-child(9):before { animation-delay: -0.3s; } +.sk-circle-dot:nth-child(10):before { animation-delay: -0.2s; } +.sk-circle-dot:nth-child(11):before { animation-delay: -0.1s; } + +@keyframes sk-circle { 0%, 80%, 100% { transform: scale(0); } 40% { @@ -329,9 +347,84 @@ } } -/* - * Usage: - * + +/* Circle Fade + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ */ +.sk-circle-fade { + width: var(--sk-size); + height: var(--sk-size); + position: relative; +} + +.sk-circle-fade-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-circle-fade-dot:before { + content: ''; + display: block; + width: 15%; + height: 15%; + background-color: var(--sk-color); + border-radius: 100%; + animation: sk-circle-fade 1.2s infinite ease-in-out both; +} + +.sk-circle-fade-dot:nth-child(1) { transform: rotate(30deg); } +.sk-circle-fade-dot:nth-child(2) { transform: rotate(60deg); } +.sk-circle-fade-dot:nth-child(3) { transform: rotate(90deg); } +.sk-circle-fade-dot:nth-child(4) { transform: rotate(120deg); } +.sk-circle-fade-dot:nth-child(5) { transform: rotate(150deg); } +.sk-circle-fade-dot:nth-child(6) { transform: rotate(180deg); } +.sk-circle-fade-dot:nth-child(7) { transform: rotate(210deg); } +.sk-circle-fade-dot:nth-child(8) { transform: rotate(240deg); } +.sk-circle-fade-dot:nth-child(9) { transform: rotate(270deg); } +.sk-circle-fade-dot:nth-child(10) { transform: rotate(300deg); } +.sk-circle-fade-dot:nth-child(11) { transform: rotate(330deg); } +.sk-circle-fade-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-circle-fade-dot:nth-child(2):before { animation-delay: -1.0s; } +.sk-circle-fade-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-circle-fade-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-circle-fade-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-circle-fade-dot:nth-child(6):before { animation-delay: -0.6s; } +.sk-circle-fade-dot:nth-child(7):before { animation-delay: -0.5s; } +.sk-circle-fade-dot:nth-child(8):before { animation-delay: -0.4s; } +.sk-circle-fade-dot:nth-child(9):before { animation-delay: -0.3s; } +.sk-circle-fade-dot:nth-child(10):before { animation-delay: -0.2s; } +.sk-circle-fade-dot:nth-child(11):before { animation-delay: -0.1s; } + +@keyframes sk-circle-fade { + 0%, 39%, 100% { + opacity: 0; + transform: scale(0.6); + } 40% { + opacity: 1; + transform: scale(1); + } +} + + +/* Grid +
@@ -343,13 +436,11 @@
- * */ .sk-grid { width: var(--sk-size); height: var(--sk-size); - /* - * Spinner positions + /* Cube positions * 1 2 3 * 4 5 6 * 7 8 9 @@ -380,83 +471,8 @@ } } -/* Circles Fade - * Usage: - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- * - */ -.sk-circles-fade { - width: var(--sk-size); - height: var(--sk-size); - position: relative; -} - -.sk-circles-fade-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; -} -.sk-circles-fade-circle:before { - content: ''; - display: block; - width: 15%; - height: 15%; - background-color: var(--sk-color); - border-radius: 100%; - animation: sk-circles-fade 1.2s infinite ease-in-out both; -} - -.sk-circles-fade-circle:nth-child(1) { transform: rotate(30deg); } -.sk-circles-fade-circle:nth-child(2) { transform: rotate(60deg); } -.sk-circles-fade-circle:nth-child(3) { transform: rotate(90deg); } -.sk-circles-fade-circle:nth-child(4) { transform: rotate(120deg); } -.sk-circles-fade-circle:nth-child(5) { transform: rotate(150deg); } -.sk-circles-fade-circle:nth-child(6) { transform: rotate(180deg); } -.sk-circles-fade-circle:nth-child(7) { transform: rotate(210deg); } -.sk-circles-fade-circle:nth-child(8) { transform: rotate(240deg); } -.sk-circles-fade-circle:nth-child(9) { transform: rotate(270deg); } -.sk-circles-fade-circle:nth-child(10) { transform: rotate(300deg); } -.sk-circles-fade-circle:nth-child(11) { transform: rotate(330deg); } -.sk-circles-fade-circle:nth-child(1):before { animation-delay: -1.1s; } -.sk-circles-fade-circle:nth-child(2):before { animation-delay: -1.0s; } -.sk-circles-fade-circle:nth-child(3):before { animation-delay: -0.9s; } -.sk-circles-fade-circle:nth-child(4):before { animation-delay: -0.8s; } -.sk-circles-fade-circle:nth-child(5):before { animation-delay: -0.7s; } -.sk-circles-fade-circle:nth-child(6):before { animation-delay: -0.6s; } -.sk-circles-fade-circle:nth-child(7):before { animation-delay: -0.5s; } -.sk-circles-fade-circle:nth-child(8):before { animation-delay: -0.4s; } -.sk-circles-fade-circle:nth-child(9):before { animation-delay: -0.3s; } -.sk-circles-fade-circle:nth-child(10):before { animation-delay: -0.2s; } -.sk-circles-fade-circle:nth-child(11):before { animation-delay: -0.1s; } - -@keyframes sk-circles-fade { - 0%, 39%, 100% { - opacity: 0; - transform: scale(0.6); - } 40% { - opacity: 1; - transform: scale(1); - } -} -/* - * Usage: +/* Fold
@@ -464,7 +480,6 @@
- * */ .sk-fold { width: var(--sk-size); @@ -511,73 +526,47 @@ } } -/* - * Usage: -
-
-
-
-
-
-
-
-
+/* Wander + +
+
+
+
+
- * */ -.sk-chase { +.sk-wander { width: var(--sk-size); height: var(--sk-size); - position: relative; - animation: sk-chase 2.5s infinite linear both; + position: relative; } -.sk-chase-dot { - width: 100%; - height: 100%; + +.sk-wander-cube { + background-color: var(--sk-color); + width: 20%; + height: 20%; position: absolute; + top: 0; left: 0; - top: 0; - animation: sk-chase-dot 2.0s infinite ease-in-out both; -} -.sk-chase-dot:before { - content: ''; - display: block; - width: 25%; - height: 25%; - background-color: var(--sk-color); - border-radius: 100%; - animation: sk-chase-dot-before 2.0s infinite ease-in-out both; -} -.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } -.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } -.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } -.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } -.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } -.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } -.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } -.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } -.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } -.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } -.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } -.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } - -@keyframes sk-chase { - 100% { - transform: rotate(360deg); - } -} - -@keyframes sk-chase-dot { - 80%, 100% { - transform: rotate(360deg); - } + --sk-wander-distance: calc(var(--sk-size) * 0.75); + animation: sk-wander 2.0s ease-in-out -2.0s infinite both; } +.sk-wander-cube:nth-child(2) { animation-delay: -0.5s; } +.sk-wander-cube:nth-child(3) { animation-delay: -1.0s; } -@keyframes sk-chase-dot-before { - 50% { - transform: scale(0.4); - } 100%, 0% { - transform: scale(1.0); - } -} +@keyframes sk-wander { + 0% { + transform: rotate(0deg); + } 25% { + transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6); + } 50% { /* Make FF rotate in the right direction */ + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg); + } 50.1% { + transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg); + } 75% { + transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6); + } 100% { + transform: rotate(-360deg); + } +} \ No newline at end of file From f45fd58bcc8e1218ac3c48a9bf62dc74c32fec4b Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 10:42:08 +0100 Subject: [PATCH 34/38] Update readme --- CHANGELOG.md | 10 +++++----- README.md | 18 +++++++++++++----- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0255254..adea497 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,11 +5,11 @@ * New: Added spinkit.min.css * Fixed: `inline-block` is no longed used to position any spinners (decoupling spacing from any potential font effects) * Changed: Most spinners now have more distinct and shorter names -* Changed: No positioning is now applied by default on any of the spinners. -* Changed: All elements now only have one single class. -* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build. -* Changed: No more SCSS. All configuration is now done through CSS vars. -* Fixed: All keyframe animations are now named after the elements/classes that are using them. +* Changed: No positioning is now applied by default on any of the spinners +* Changed: All elements now only have one single class +* Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build +* Changed: No more SCSS. All configuration is now done through CSS vars +* Fixed: All keyframe animations are now named after the elements/classes that are using them # 1.2.5 diff --git a/README.md b/README.md index 14862e8..c737720 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,19 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi - Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need) - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` -- Configure the spinner through the CSS variables `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. +- Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. + +You can include SpinKit to your project with `bower`: + +```bash +$ bower install spinkit +``` + +or npm: + +```bash +$ npm install spinkit +``` ## Spinners @@ -192,7 +204,3 @@ if (!browserSupportsCSSProperty('animation')) { // fallback… } ``` - -## Contributing - -See [CONTRIBUTING.md](https://github.com/tobiasahlin/SpinKit/blob/master/CONTRIBUTING.md) for details. From ef9c61adcb1581b5b16a59fe54f2b7a822286e79 Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 10:48:36 +0100 Subject: [PATCH 35/38] Fix bug where Flow wouldn't be completely circular in Chrome --- spinkit.css | 7 ++++--- spinkit.min.css | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/spinkit.css b/spinkit.css index d0273d6..90cd999 100644 --- a/spinkit.css +++ b/spinkit.css @@ -203,15 +203,16 @@ */ .sk-flow { width: calc(var(--sk-size) * 1.3); + height: calc(var(--sk-size) * 1.3); display: flex; justify-content: space-between; } .sk-flow-dot { - width: calc(var(--sk-size) / 3); - height: calc(var(--sk-size) / 3); + width: 25%; + height: 25%; background-color: var(--sk-color); - border-radius: 100%; + border-radius: 50%; animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both; } diff --git a/spinkit.min.css b/spinkit.min.css index 690b662..73a953d 100644 --- a/spinkit.min.css +++ b/spinkit.min.css @@ -1 +1 @@ -:root{--sk-size:40px;--sk-color:#333}.sk-rotating-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-rotating-plane 1.2s infinite ease-in-out}@keyframes sk-rotating-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-double-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-double-bounce-circle{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-double-bounce 2s infinite ease-in-out}.sk-double-bounce-circle:last-child{animation-delay:-1.0s}@keyframes sk-double-bounce{0%,100%{transform:scale(0)}50%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-wander{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wander-cube{background-color:var(--sk-color);width:20%;height:20%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wander 2.0s ease-in-out -2.0s infinite both}.sk-wander-cube:nth-child(2){animation-delay:-0.5s}.sk-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1s infinite ease-in-out}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-swing{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear}.sk-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--sk-color);border-radius:100%;animation:sk-swing-dot 2s infinite ease-in-out}.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{100%{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.sk-three-bounce{width:calc(var(--sk-size) * 1.5);display:flex;justify-content:space-between}.sk-three-bounce-circle{width:calc(var(--sk-size) / 3);height:calc(var(--sk-size) / 3);background-color:var(--sk-color);border-radius:100%;animation:sk-three-bounce 1.4s ease-in-out 0s infinite both}.sk-three-bounce-circle:nth-child(1){animation-delay:-0.32s}.sk-three-bounce-circle:nth-child(2){animation-delay:-0.16s}@keyframes sk-three-bounce{0%,80%,100%{transform:scale(0.25)}40%{transform:scale(1)}}.sk-circles{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles 1.2s infinite ease-in-out both}.sk-circles-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-circle:nth-child(2):before{animation-delay:-1s}.sk-circles-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-circles-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circles-fade-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circles-fade-circle:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circles-fade 1.2s infinite ease-in-out both}.sk-circles-fade-circle:nth-child(1){transform:rotate(30deg)}.sk-circles-fade-circle:nth-child(2){transform:rotate(60deg)}.sk-circles-fade-circle:nth-child(3){transform:rotate(90deg)}.sk-circles-fade-circle:nth-child(4){transform:rotate(120deg)}.sk-circles-fade-circle:nth-child(5){transform:rotate(150deg)}.sk-circles-fade-circle:nth-child(6){transform:rotate(180deg)}.sk-circles-fade-circle:nth-child(7){transform:rotate(210deg)}.sk-circles-fade-circle:nth-child(8){transform:rotate(240deg)}.sk-circles-fade-circle:nth-child(9){transform:rotate(270deg)}.sk-circles-fade-circle:nth-child(10){transform:rotate(300deg)}.sk-circles-fade-circle:nth-child(11){transform:rotate(330deg)}.sk-circles-fade-circle:nth-child(1):before{animation-delay:-1.1s}.sk-circles-fade-circle:nth-child(2):before{animation-delay:-1.0s}.sk-circles-fade-circle:nth-child(3):before{animation-delay:-0.9s}.sk-circles-fade-circle:nth-child(4):before{animation-delay:-0.8s}.sk-circles-fade-circle:nth-child(5):before{animation-delay:-0.7s}.sk-circles-fade-circle:nth-child(6):before{animation-delay:-0.6s}.sk-circles-fade-circle:nth-child(7):before{animation-delay:-0.5s}.sk-circles-fade-circle:nth-child(8):before{animation-delay:-0.4s}.sk-circles-fade-circle:nth-child(9):before{animation-delay:-0.3s}.sk-circles-fade-circle:nth-child(10):before{animation-delay:-0.2s}.sk-circles-fade-circle:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circles-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}} +:root{--sk-size:40px;--sk-color:#333}.sk-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-plane 1.2s infinite ease-in-out}@keyframes sk-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}.sk-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-bounce-dot{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}.sk-bounce-dot:nth-child(2){animation-delay:-1.0s}@keyframes sk-bounce{0%,100%{transform:scale(0)}45%,55%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-flow{width:calc(var(--sk-size) * 1.3);height:calc(var(--sk-size) * 1.3);display:flex;justify-content:space-between}.sk-flow-dot{width:25%;height:25%;background-color:var(--sk-color);border-radius:50%;animation:sk-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both}.sk-flow-dot:nth-child(1){animation-delay:-0.30s}.sk-flow-dot:nth-child(2){animation-delay:-0.15s}@keyframes sk-flow{0%,80%,100%{transform:scale(0.3)}40%{transform:scale(1)}}.sk-swing{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear}.sk-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--sk-color);border-radius:100%;animation:sk-swing-dot 2s infinite ease-in-out}.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{100%{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.sk-circle{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle 1.2s infinite ease-in-out both}.sk-circle-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-dot:nth-child(2):before{animation-delay:-1s}.sk-circle-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circle-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-fade-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-fade-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle-fade 1.2s infinite ease-in-out both}.sk-circle-fade-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-fade-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-fade-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-fade-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-fade-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-fade-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-fade-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-fade-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-fade-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-fade-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-fade-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-fade-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-fade-dot:nth-child(2):before{animation-delay:-1.0s}.sk-circle-fade-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-fade-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-fade-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-fade-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-fade-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-fade-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-fade-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-fade-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-fade-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-wander{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wander-cube{background-color:var(--sk-color);width:20%;height:20%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wander 2.0s ease-in-out -2.0s infinite both}.sk-wander-cube:nth-child(2){animation-delay:-0.5s}.sk-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}} From f436d4c0e8885a28c10eeee7ecfdb52753edd52e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 10:53:00 +0100 Subject: [PATCH 36/38] Update readme with instructions about default values --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c737720..69f651f 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi - Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need) - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` +- By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`. - Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. You can include SpinKit to your project with `bower`: From b999571a90933ec0bee7e34d7a6a0715901d212e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 11:01:04 +0100 Subject: [PATCH 37/38] Add center utility class, and explain how to use it --- README.md | 1 + spinkit.css | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/README.md b/README.md index 69f651f..bb7b4cb 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi - Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need) - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` +- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`) - By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`. - Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. diff --git a/spinkit.css b/spinkit.css index 90cd999..de35f4c 100644 --- a/spinkit.css +++ b/spinkit.css @@ -5,6 +5,10 @@ } +/* Utility class for centering */ +.sk-center { margin: auto; } + + /* Plane
From 2c0381d19341235f2fda72f214ed456e55c59c8e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 11:02:03 +0100 Subject: [PATCH 38/38] Update readme, and dist --- CHANGELOG.md | 2 +- spinkit.min.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index adea497..6d76e46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ * New: Added spinkit.min.css * Fixed: `inline-block` is no longed used to position any spinners (decoupling spacing from any potential font effects) * Changed: Most spinners now have more distinct and shorter names -* Changed: No positioning is now applied by default on any of the spinners +* Changed: No positioning is now applied by default on any of the spinners (center the spinner with the utility class `sk-center`) * Changed: All elements now only have one single class * Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build * Changed: No more SCSS. All configuration is now done through CSS vars diff --git a/spinkit.min.css b/spinkit.min.css index 73a953d..248e1c3 100644 --- a/spinkit.min.css +++ b/spinkit.min.css @@ -1 +1 @@ -:root{--sk-size:40px;--sk-color:#333}.sk-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-plane 1.2s infinite ease-in-out}@keyframes sk-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}.sk-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-bounce-dot{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}.sk-bounce-dot:nth-child(2){animation-delay:-1.0s}@keyframes sk-bounce{0%,100%{transform:scale(0)}45%,55%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-flow{width:calc(var(--sk-size) * 1.3);height:calc(var(--sk-size) * 1.3);display:flex;justify-content:space-between}.sk-flow-dot{width:25%;height:25%;background-color:var(--sk-color);border-radius:50%;animation:sk-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both}.sk-flow-dot:nth-child(1){animation-delay:-0.30s}.sk-flow-dot:nth-child(2){animation-delay:-0.15s}@keyframes sk-flow{0%,80%,100%{transform:scale(0.3)}40%{transform:scale(1)}}.sk-swing{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear}.sk-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--sk-color);border-radius:100%;animation:sk-swing-dot 2s infinite ease-in-out}.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{100%{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.sk-circle{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle 1.2s infinite ease-in-out both}.sk-circle-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-dot:nth-child(2):before{animation-delay:-1s}.sk-circle-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circle-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-fade-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-fade-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle-fade 1.2s infinite ease-in-out both}.sk-circle-fade-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-fade-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-fade-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-fade-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-fade-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-fade-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-fade-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-fade-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-fade-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-fade-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-fade-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-fade-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-fade-dot:nth-child(2):before{animation-delay:-1.0s}.sk-circle-fade-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-fade-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-fade-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-fade-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-fade-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-fade-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-fade-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-fade-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-fade-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-wander{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wander-cube{background-color:var(--sk-color);width:20%;height:20%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wander 2.0s ease-in-out -2.0s infinite both}.sk-wander-cube:nth-child(2){animation-delay:-0.5s}.sk-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}} +:root{--sk-size:40px;--sk-color:#333}.sk-center{margin:auto}.sk-plane{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);animation:sk-plane 1.2s infinite ease-in-out}@keyframes sk-plane{0%{transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.sk-chase{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2.0s infinite ease-in-out both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:var(--sk-color);border-radius:100%;animation:sk-chase-dot-before 2.0s infinite ease-in-out both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-0.6s}@keyframes sk-chase{100%{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,100%{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(0.4)}100%,0%{transform:scale(1.0)}}.sk-bounce{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-bounce-dot{width:100%;height:100%;border-radius:50%;background-color:var(--sk-color);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}.sk-bounce-dot:nth-child(2){animation-delay:-1.0s}@keyframes sk-bounce{0%,100%{transform:scale(0)}45%,55%{transform:scale(1)}}.sk-wave{width:var(--sk-size);height:var(--sk-size);display:flex;justify-content:space-between}.sk-wave-rect{background-color:var(--sk-color);height:100%;width:15%;animation:sk-wave 1.2s infinite ease-in-out}.sk-wave-rect:nth-child(1){animation-delay:-1.2s}.sk-wave-rect:nth-child(2){animation-delay:-1.1s}.sk-wave-rect:nth-child(3){animation-delay:-1.0s}.sk-wave-rect:nth-child(4){animation-delay:-0.9s}.sk-wave-rect:nth-child(5){animation-delay:-0.8s}@keyframes sk-wave{0%,40%,100%{transform:scaleY(0.4)}20%{transform:scaleY(1)}}.sk-pulse{width:var(--sk-size);height:var(--sk-size);background-color:var(--sk-color);border-radius:100%;animation:sk-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)}@keyframes sk-pulse{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.sk-flow{width:calc(var(--sk-size) * 1.3);height:calc(var(--sk-size) * 1.3);display:flex;justify-content:space-between}.sk-flow-dot{width:25%;height:25%;background-color:var(--sk-color);border-radius:50%;animation:sk-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both}.sk-flow-dot:nth-child(1){animation-delay:-0.30s}.sk-flow-dot:nth-child(2){animation-delay:-0.15s}@keyframes sk-flow{0%,80%,100%{transform:scale(0.3)}40%{transform:scale(1)}}.sk-swing{width:var(--sk-size);height:var(--sk-size);position:relative;animation:sk-swing 1.8s infinite linear}.sk-swing-dot{width:45%;height:45%;position:absolute;top:0;left:0;right:0;margin:auto;background-color:var(--sk-color);border-radius:100%;animation:sk-swing-dot 2s infinite ease-in-out}.sk-swing-dot:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-swing{100%{transform:rotate(360deg)}}@keyframes sk-swing-dot{0%,100%{transform:scale(0.2)}50%{transform:scale(1)}}.sk-circle{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle 1.2s infinite ease-in-out both}.sk-circle-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-dot:nth-child(2):before{animation-delay:-1s}.sk-circle-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.sk-circle-fade{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-circle-fade-dot{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle-fade-dot:before{content:'';display:block;width:15%;height:15%;background-color:var(--sk-color);border-radius:100%;animation:sk-circle-fade 1.2s infinite ease-in-out both}.sk-circle-fade-dot:nth-child(1){transform:rotate(30deg)}.sk-circle-fade-dot:nth-child(2){transform:rotate(60deg)}.sk-circle-fade-dot:nth-child(3){transform:rotate(90deg)}.sk-circle-fade-dot:nth-child(4){transform:rotate(120deg)}.sk-circle-fade-dot:nth-child(5){transform:rotate(150deg)}.sk-circle-fade-dot:nth-child(6){transform:rotate(180deg)}.sk-circle-fade-dot:nth-child(7){transform:rotate(210deg)}.sk-circle-fade-dot:nth-child(8){transform:rotate(240deg)}.sk-circle-fade-dot:nth-child(9){transform:rotate(270deg)}.sk-circle-fade-dot:nth-child(10){transform:rotate(300deg)}.sk-circle-fade-dot:nth-child(11){transform:rotate(330deg)}.sk-circle-fade-dot:nth-child(1):before{animation-delay:-1.1s}.sk-circle-fade-dot:nth-child(2):before{animation-delay:-1.0s}.sk-circle-fade-dot:nth-child(3):before{animation-delay:-0.9s}.sk-circle-fade-dot:nth-child(4):before{animation-delay:-0.8s}.sk-circle-fade-dot:nth-child(5):before{animation-delay:-0.7s}.sk-circle-fade-dot:nth-child(6):before{animation-delay:-0.6s}.sk-circle-fade-dot:nth-child(7):before{animation-delay:-0.5s}.sk-circle-fade-dot:nth-child(8):before{animation-delay:-0.4s}.sk-circle-fade-dot:nth-child(9):before{animation-delay:-0.3s}.sk-circle-fade-dot:nth-child(10):before{animation-delay:-0.2s}.sk-circle-fade-dot:nth-child(11):before{animation-delay:-0.1s}@keyframes sk-circle-fade{0%,39%,100%{opacity:0;transform:scale(0.6)}40%{opacity:1;transform:scale(1)}}.sk-grid{width:var(--sk-size);height:var(--sk-size)}.sk-grid-cube{width:33.33%;height:33.33%;background-color:var(--sk-color);float:left;animation:sk-grid 1.3s infinite ease-in-out}.sk-grid-cube:nth-child(1){animation-delay:.2s}.sk-grid-cube:nth-child(2){animation-delay:.3s}.sk-grid-cube:nth-child(3){animation-delay:.4s}.sk-grid-cube:nth-child(4){animation-delay:.1s}.sk-grid-cube:nth-child(5){animation-delay:.2s}.sk-grid-cube:nth-child(6){animation-delay:.3s}.sk-grid-cube:nth-child(7){animation-delay:0s}.sk-grid-cube:nth-child(8){animation-delay:.1s}.sk-grid-cube:nth-child(9){animation-delay:.2s}@keyframes sk-grid{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-fold-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}.sk-fold-cube:nth-child(2):before{animation-delay:.3s}.sk-fold-cube:nth-child(4):before{animation-delay:.6s}.sk-fold-cube:nth-child(3):before{animation-delay:.9s}@keyframes sk-fold{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-wander{width:var(--sk-size);height:var(--sk-size);position:relative}.sk-wander-cube{background-color:var(--sk-color);width:20%;height:20%;position:absolute;top:0;left:0;--sk-wander-distance:calc(var(--sk-size) * 0.75);animation:sk-wander 2.0s ease-in-out -2.0s infinite both}.sk-wander-cube:nth-child(2){animation-delay:-0.5s}.sk-wander-cube:nth-child(3){animation-delay:-1.0s}@keyframes sk-wander{0%{transform:rotate(0)}25%{transform:translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)}50%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)}50.1%{transform:translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)}75%{transform:translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)}100%{transform:rotate(-360deg)}}