From da85ed978f1037650d88bb226e559e54719031f9 Mon Sep 17 00:00:00 2001 From: l Date: Wed, 26 Dec 2018 21:55:18 +0800 Subject: [PATCH] chore(release): 0.1.1 --- dist/three-dots.css | 4 +++- dist/three-dots.css.map | 1 + dist/three-dots.min.css | 4 +++- dist/three-dots.min.css.map | 1 + less/three-dots.less | 2 +- package.json | 2 +- sass/three-dots.scss | 2 +- 7 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 dist/three-dots.css.map create mode 100644 dist/three-dots.min.css.map diff --git a/dist/three-dots.css b/dist/three-dots.css index 626dd26..69f4c4a 100644 --- a/dist/three-dots.css +++ b/dist/three-dots.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /** * - * three-dots.css v0.1.0 + * three-dots.css v0.1.1 * * https://nzbin.github.io/three-dots/ * @@ -1232,3 +1232,5 @@ transform: translateX(-25px) rotateZ(0deg); } } + +/*# sourceMappingURL=three-dots.css.map */ \ No newline at end of file diff --git a/dist/three-dots.css.map b/dist/three-dots.css.map new file mode 100644 index 0000000..7414f61 --- /dev/null +++ b/dist/three-dots.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["three-dots.css"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;GAUG;AACH;;;;GAIG;AACH;EACE,mBAAmB;EACnB,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,yCAAyC;CAC1C;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,OAAO;CACR;;AAED;EACE,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,+CAA+C;CAChD;;AAED;EACE,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,8CAA8C;CAC/C;;AAED;EACE;IACE,uBAAuB;GACxB;EACD;IACE,yBAAyB;GAC1B;EACD;IACE,0BAA0B;GAC3B;EACD;IACE,uBAAuB;GACxB;EACD;IACE,uBAAuB;GACxB;CACF;;AAED;EACE;IACE,uBAAuB;GACxB;EACD;IACE,uBAAuB;GACxB;EACD;IACE,yBAAyB;GAC1B;EACD;IACE,uBAAuB;GACxB;EACD;IACE,uBAAuB;GACxB;CACF;;AAED;EACE;IACE,uBAAuB;GACxB;EACD;IACE,uBAAuB;GACxB;EACD;IACE,0BAA0B;GAC3B;EACD;IACE,yBAAyB;GAC1B;EACD;IACE,uBAAuB;GACxB;CACF;;AAED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,oCAAoC;EACpC,yCAAyC;EACzC,sBAAsB;CACvB;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;CAChB;;AAED;EACE,oCAAoC;EACpC,+CAA+C;EAC/C,oBAAoB;CACrB;;AAED;EACE,qCAAqC;EACrC,8CAA8C;EAC9C,qBAAqB;CACtB;;AAED;EACE;IACE,oCAAoC;GACrC;EACD;IACE,mCAAmC;GACpC;EACD;;IAEE,oCAAoC;GACrC;CACF;;AAED;EACE;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AED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,SAAS;EACT,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,kFAAkF;EAClF,sCAAsC;CACvC;;AAED;EACE;IACE,kFAAkF;GACnF;EACD;IACE,mFAAmF;GACpF;EACD;IACE,uFAAuF;GACxF;EACD;IACE,sFAAsF;GACvF;EACD;IACE,kFAAkF;GACnF;EACD;IACE,mFAAmF;GACpF;EACD;IACE,uFAAuF;GACxF;EACD;IACE,sFAAsF;GACvF;EACD;IACE,kFAAkF;GACnF;EACD;IACE,mFAAmF;GACpF;EACD;IACE,uFAAuF;GACxF;EACD;IACE,sFAAsF;GACvF;EACD;IACE,kFAAkF;GACnF;CACF;;AAED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,qEAAqE;CACtE;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,OAAO;CACR;;AAED;EACE,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,qDAAqD;CACtD;;AAED;EACE,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,mEAAmE;CACpE;;AAED;EACE;IACE,uBAAuB;GACxB;EACD;IACE,wBAAwB;GACzB;EACD;IACE,wBAAwB;GACzB;CACF;;AAED;EACE;IACE,YAAY;GACb;EACD;IACE,YAAY;GACb;EACD;IACE,YAAY;GACb;EACD;IACE,YAAY;GACb;CACF;;AAED;EACE;IACE,aAAa;GACd;EACD;IACE,YAAY;GACb;EACD;IACE,aAAa;GACd;EACD;IACE,aAAa;GACd;CACF;;AAED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,yCAAyC;EACzC,wCAAwC;EACxC,uBAAuB;CACxB;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;CAChB;;AAED;EACE,yCAAyC;EACzC,wCAAwC;EACxC,wBAAwB;CACzB;;AAED;EACE,yCAAyC;EACzC,wCAAwC;EACxC,wBAAwB;CACzB;;AAED;EACE;IACE,yCAAyC;GAC1C;EACD;IACE,0CAA0C;GAC3C;EACD;IACE,0CAA0C;GAC3C;CACF;;AAED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,mBAAmB;EACnB,wTAAwT;EACxT,wCAAwC;CACzC;;AAED;EACE;;IAEE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;EACD;IACE,uUAAuU;GACxU;CACF;;AAED;;;;GAIG;AACH;EACE,mBAAmB;EACnB,cAAc;EACd,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,iCAAiC;EACjC,yCAAyC;EACzC,qBAAqB;CACtB;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,OAAO;CACR;;AAED;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,+CAA+C;EAC/C,oBAAoB;CACrB;;AAED;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,eAAe;EACf,8CAA8C;EAC9C,qBAAqB;CACtB;;AAED;EACE;IACE,oDAAoD;GACrD;EACD;;;IAGE,iCAAiC;GAClC;EACD;IACE,mDAAmD;GACpD;CACF;;AAED;EACE;IACE,oDAAoD;GACrD;EACD;;;IAGE,iCAAiC;GAClC;EACD;IACE,mDAAmD;GACpD;CACF;;AAED;EACE;IACE,qDAAqD;GACtD;EACD;;;IAGE,kCAA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GAC1B;EACD;IACE,6BAA6B;GAC9B;EACD;IACE,4BAA4B;GAC7B;CACF;;AAED;;;;;GAKG;AACH;EACE,mBAAmB;EACnB,aAAa;EACb,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,sBAAsB;EACtB,mBAAmB;EACnB,mCAAmC;CACpC;;AAED;EACE;IACE,WAAW;IACX,mCAAmC;GACpC;EACD;IACE,uBAAuB;GACxB;EACD;IACE,UAAU;IACV,oCAAoC;IACpC,2BAA2B;GAC5B;EACD;IACE,uBAAuB;GACxB;EACD;IACE,WAAW;GACZ;EACD;IACE,WAAW;GACZ;CACF;;AAED;;;;;GAKG;AACH;EACE,mBAAmB;EACnB,aAAa;EACb,gBAAgB;CACjB;;AAED;EACE,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,6BAA6B;EAC7B,kCAAkC;CACnC;;AAED;EACE;IACE,aAAa;IACb,2CAA2C;GAC5C;EACD;IACE,aAAa;IACb,4CAA4C;GAC7C;EACD;IACE,aAAa;IACb,2CAA2C;GAC5C;EACD;IACE,cAAc;IACd,2CAA2C;GAC5C;EACD;IACE,cAAc;IACd,4CAA4C;GAC7C;EACD;IACE,cAAc;IACd,2CAA2C;GAC5C;EACD;IACE,cAAc;IACd,2CAA2C;GAC5C;EACD;IACE,cAAc;IACd,4CAA4C;GAC7C;EACD;IACE,cAAc;IACd,2CAA2C;GAC5C;CACF","file":"three-dots.css","sourcesContent":["@charset \"UTF-8\";\n/**\n *\n * three-dots.css v0.1.1\n *\n * https://nzbin.github.io/three-dots/\n *\n * Copyright (c) 2018 nzbin\n *\n * Released under the MIT license\n *\n */\n/**\n * ==============================================\n * Dot Elastic\n * ==============================================\n */\n.dot-elastic {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotElastic 1s infinite linear;\n}\n\n.dot-elastic::before, .dot-elastic::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-elastic::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotElasticBefore 1s infinite linear;\n}\n\n.dot-elastic::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotElasticAfter 1s infinite linear;\n}\n\n@keyframes dotElasticBefore {\n 0% {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(1, 1.5);\n }\n 50% {\n transform: scale(1, 0.67);\n }\n 75% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n}\n\n@keyframes dotElastic {\n 0% {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(1, 1);\n }\n 50% {\n transform: scale(1, 1.5);\n }\n 75% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n}\n\n@keyframes dotElasticAfter {\n 0% {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(1, 1);\n }\n 50% {\n transform: scale(1, 0.67);\n }\n 75% {\n transform: scale(1, 1.5);\n }\n 100% {\n transform: scale(1, 1);\n }\n}\n\n/**\n * ==============================================\n * Dot Pulse\n * ==============================================\n */\n.dot-pulse {\n position: relative;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9999px 0 0 -5px #9880ff;\n animation: dotPulse 1.5s infinite linear;\n animation-delay: .25s;\n}\n\n.dot-pulse::before, .dot-pulse::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n.dot-pulse::before {\n box-shadow: 9984px 0 0 -5px #9880ff;\n animation: dotPulseBefore 1.5s infinite linear;\n animation-delay: 0s;\n}\n\n.dot-pulse::after {\n box-shadow: 10014px 0 0 -5px #9880ff;\n animation: dotPulseAfter 1.5s infinite linear;\n animation-delay: .5s;\n}\n\n@keyframes dotPulseBefore {\n 0% {\n box-shadow: 9984px 0 0 -5px #9880ff;\n }\n 30% {\n box-shadow: 9984px 0 0 2px #9880ff;\n }\n 60%,\n 100% {\n box-shadow: 9984px 0 0 -5px #9880ff;\n }\n}\n\n@keyframes dotPulse {\n 0% {\n box-shadow: 9999px 0 0 -5px #9880ff;\n }\n 30% {\n box-shadow: 9999px 0 0 2px #9880ff;\n }\n 60%,\n 100% {\n box-shadow: 9999px 0 0 -5px #9880ff;\n }\n}\n\n@keyframes dotPulseAfter {\n 0% {\n box-shadow: 10014px 0 0 -5px #9880ff;\n }\n 30% {\n box-shadow: 10014px 0 0 2px #9880ff;\n }\n 60%,\n 100% {\n box-shadow: 10014px 0 0 -5px #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Flashing\n * ==============================================\n */\n.dot-flashing {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFlashing 1s infinite linear alternate;\n animation-delay: .5s;\n}\n\n.dot-flashing::before, .dot-flashing::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-flashing::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFlashing 1s infinite alternate;\n animation-delay: 0s;\n}\n\n.dot-flashing::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFlashing 1s infinite alternate;\n animation-delay: 1s;\n}\n\n@keyframes dotFlashing {\n 0% {\n background-color: #9880ff;\n }\n 50%,\n 100% {\n background-color: #ebe6ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Collision\n * ==============================================\n */\n.dot-collision {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n.dot-collision::before, .dot-collision::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-collision::before {\n left: -10px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotCollisionBefore 2s infinite ease-in;\n}\n\n.dot-collision::after {\n left: 10px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotCollisionAfter 2s infinite ease-in;\n animation-delay: 1s;\n}\n\n@keyframes dotCollisionBefore {\n 0%,\n 50%,\n 75%,\n 100% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-15px);\n }\n}\n\n@keyframes dotCollisionAfter {\n 0%,\n 50%,\n 75%,\n 100% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(15px);\n }\n}\n\n/**\n * ==============================================\n * Dot Revolution\n * ==============================================\n */\n.dot-revolution {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n.dot-revolution::before, .dot-revolution::after {\n content: '';\n display: inline-block;\n position: absolute;\n}\n\n.dot-revolution::before {\n left: 0;\n top: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n transform-origin: 5px 20px;\n animation: dotRevolution 1.4s linear infinite;\n}\n\n.dot-revolution::after {\n left: 0;\n top: -30px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n transform-origin: 5px 35px;\n animation: dotRevolution 1s linear infinite;\n}\n\n@keyframes dotRevolution {\n 0% {\n transform: rotateZ(0deg) translate3d(0, 0, 0);\n }\n 100% {\n transform: rotateZ(360deg) translate3d(0, 0, 0);\n }\n}\n\n/**\n * ==============================================\n * Dot Carousel\n * ==============================================\n */\n.dot-carousel {\n position: relative;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n animation: dotCarousel 1.5s infinite linear;\n}\n\n@keyframes dotCarousel {\n 0% {\n box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff;\n }\n 50% {\n box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff;\n }\n 100% {\n box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Typing\n * ==============================================\n */\n.dot-typing {\n position: relative;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n animation: dotTyping 1.5s infinite linear;\n}\n\n@keyframes dotTyping {\n 0% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n 16.667% {\n box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n 33.333% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n 50% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n 66.667% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n 83.333% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;\n }\n 100% {\n box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Windmill\n * ==============================================\n */\n.dot-windmill {\n position: relative;\n top: -10px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n transform-origin: 5px 15px;\n animation: dotWindmill 2s infinite linear;\n}\n\n.dot-windmill::before, .dot-windmill::after {\n content: '';\n display: inline-block;\n position: absolute;\n}\n\n.dot-windmill::before {\n left: -8.66px;\n top: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n.dot-windmill::after {\n left: 8.66px;\n top: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n@keyframes dotWindmill {\n 0% {\n transform: rotateZ(0deg) translate3d(0, 0, 0);\n }\n 100% {\n transform: rotateZ(720deg) translate3d(0, 0, 0);\n }\n}\n\n/**\n * ==============================================\n * Dot Bricks\n * ==============================================\n */\n.dot-bricks {\n position: relative;\n top: 8px;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;\n animation: dotBricks 2s infinite ease;\n}\n\n@keyframes dotBricks {\n 0% {\n box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;\n }\n 8.333% {\n box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;\n }\n 16.667% {\n box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;\n }\n 25% {\n box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;\n }\n 33.333% {\n box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;\n }\n 41.667% {\n box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;\n }\n 50% {\n box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;\n }\n 58.333% {\n box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;\n }\n 66.666% {\n box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;\n }\n 75% {\n box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;\n }\n 83.333% {\n box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;\n }\n 91.667% {\n box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;\n }\n 100% {\n box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Floating\n * ==============================================\n */\n.dot-floating {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);\n}\n\n.dot-floating::before, .dot-floating::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-floating::before {\n left: -12px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFloatingBefore 3s infinite ease-in-out;\n}\n\n.dot-floating::after {\n left: -24px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);\n}\n\n@keyframes dotFloating {\n 0% {\n left: calc(-50% - 5px);\n }\n 75% {\n left: calc(50% + 105px);\n }\n 100% {\n left: calc(50% + 105px);\n }\n}\n\n@keyframes dotFloatingBefore {\n 0% {\n left: -50px;\n }\n 50% {\n left: -12px;\n }\n 75% {\n left: -50px;\n }\n 100% {\n left: -50px;\n }\n}\n\n@keyframes dotFloatingAfter {\n 0% {\n left: -100px;\n }\n 50% {\n left: -24px;\n }\n 75% {\n left: -100px;\n }\n 100% {\n left: -100px;\n }\n}\n\n/**\n * ==============================================\n * Dot Fire\n * ==============================================\n */\n.dot-fire {\n position: relative;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9999px 22.5px 0 -5px #9880ff;\n animation: dotFire 1.5s infinite linear;\n animation-delay: -.85s;\n}\n\n.dot-fire::before, .dot-fire::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n}\n\n.dot-fire::before {\n box-shadow: 9999px 22.5px 0 -5px #9880ff;\n animation: dotFire 1.5s infinite linear;\n animation-delay: -1.85s;\n}\n\n.dot-fire::after {\n box-shadow: 9999px 22.5px 0 -5px #9880ff;\n animation: dotFire 1.5s infinite linear;\n animation-delay: -2.85s;\n}\n\n@keyframes dotFire {\n 1% {\n box-shadow: 9999px 22.5px 0 -5px #9880ff;\n }\n 50% {\n box-shadow: 9999px -5.625px 0 2px #9880ff;\n }\n 100% {\n box-shadow: 9999px -22.5px 0 -5px #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Spin\n * ==============================================\n */\n.dot-spin {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: transparent;\n color: transparent;\n box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);\n animation: dotSpin 1.5s infinite linear;\n}\n\n@keyframes dotSpin {\n 0%,\n 100% {\n box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);\n }\n 12.5% {\n box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);\n }\n 25% {\n box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);\n }\n 37.5% {\n box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);\n }\n 50% {\n box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);\n }\n 62.5% {\n box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;\n }\n 75% {\n box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;\n }\n 87.5% {\n box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;\n }\n}\n\n/**\n * ==============================================\n * Dot Falling\n * ==============================================\n */\n.dot-falling {\n position: relative;\n left: -9999px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n box-shadow: 9999px 0 0 0 #9880ff;\n animation: dotFalling 1s infinite linear;\n animation-delay: .1s;\n}\n\n.dot-falling::before, .dot-falling::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-falling::before {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFallingBefore 1s infinite linear;\n animation-delay: 0s;\n}\n\n.dot-falling::after {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotFallingAfter 1s infinite linear;\n animation-delay: .2s;\n}\n\n@keyframes dotFalling {\n 0% {\n box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);\n }\n 25%,\n 50%,\n 75% {\n box-shadow: 9999px 0 0 0 #9880ff;\n }\n 100% {\n box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);\n }\n}\n\n@keyframes dotFallingBefore {\n 0% {\n box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);\n }\n 25%,\n 50%,\n 75% {\n box-shadow: 9984px 0 0 0 #9880ff;\n }\n 100% {\n box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);\n }\n}\n\n@keyframes dotFallingAfter {\n 0% {\n box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);\n }\n 25%,\n 50%,\n 75% {\n box-shadow: 10014px 0 0 0 #9880ff;\n }\n 100% {\n box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);\n }\n}\n\n/**\n * ==============================================\n * Dot Stretching\n * ==============================================\n */\n.dot-stretching {\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n transform: scale(1.25, 1.25);\n animation: dotStretching 2s infinite ease-in;\n}\n\n.dot-stretching::before, .dot-stretching::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n}\n\n.dot-stretching::before {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotStretchingBefore 2s infinite ease-in;\n}\n\n.dot-stretching::after {\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: #9880ff;\n color: #9880ff;\n animation: dotStretchingAfter 2s infinite ease-in;\n}\n\n@keyframes dotStretching {\n 0% {\n transform: scale(1.25, 1.25);\n }\n 50%,\n 60% {\n transform: scale(0.8, 0.8);\n }\n 100% {\n transform: scale(1.25, 1.25);\n }\n}\n\n@keyframes dotStretchingBefore {\n 0% {\n transform: translate(0) scale(0.7, 0.7);\n }\n 50%,\n 60% {\n transform: translate(-20px) scale(1, 1);\n }\n 100% {\n transform: translate(0) scale(0.7, 0.7);\n }\n}\n\n@keyframes dotStretchingAfter {\n 0% {\n transform: translate(0) scale(0.7, 0.7);\n }\n 50%,\n 60% {\n transform: translate(20px) scale(1, 1);\n }\n 100% {\n transform: translate(0) scale(0.7, 0.7);\n }\n}\n\n/**\n * ==============================================\n * Experiment-Gooey Effect\n * Dot Gathering\n * ==============================================\n */\n.dot-gathering {\n position: relative;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n margin: -1px 0;\n filter: blur(2px);\n}\n\n.dot-gathering::before, .dot-gathering::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: -50px;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n opacity: 0;\n filter: blur(2px);\n animation: dotGathering 2s infinite ease-in;\n}\n\n.dot-gathering::after {\n animation-delay: .5s;\n}\n\n@keyframes dotGathering {\n 0% {\n opacity: 0;\n transform: translateX(0);\n }\n 35%,\n 60% {\n opacity: 1;\n transform: translateX(50px);\n }\n 100% {\n opacity: 0;\n transform: translateX(100px);\n }\n}\n\n/**\n * ==============================================\n * Experiment-Gooey Effect\n * Dot Hourglass\n * ==============================================\n */\n.dot-hourglass {\n position: relative;\n top: -15px;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n margin: -1px 0;\n filter: blur(2px);\n transform-origin: 5px 20px;\n animation: dotHourglass 2.4s infinite ease-in-out;\n animation-delay: .6s;\n}\n\n.dot-hourglass::before, .dot-hourglass::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n filter: blur(2px);\n}\n\n.dot-hourglass::before {\n top: 30px;\n}\n\n.dot-hourglass::after {\n animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);\n}\n\n@keyframes dotHourglass {\n 0% {\n transform: rotateZ(0deg);\n }\n 25% {\n transform: rotateZ(180deg);\n }\n 50% {\n transform: rotateZ(180deg);\n }\n 75% {\n transform: rotateZ(360deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n}\n\n@keyframes dotHourglassAfter {\n 0% {\n transform: translateY(0);\n }\n 25% {\n transform: translateY(30px);\n }\n 50% {\n transform: translateY(30px);\n }\n 75% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n/**\n * ==============================================\n * Experiment-Gooey Effect\n * Dot Overtaking\n * ==============================================\n */\n.dot-overtaking {\n position: relative;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: transparent;\n color: black;\n margin: -1px 0;\n box-shadow: 0 -20px 0 0;\n filter: blur(2px);\n animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);\n}\n\n.dot-overtaking::before, .dot-overtaking::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: transparent;\n color: black;\n box-shadow: 0 -20px 0 0;\n filter: blur(2px);\n}\n\n.dot-overtaking::before {\n animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);\n animation-delay: .3s;\n}\n\n.dot-overtaking::after {\n animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);\n animation-delay: .6s;\n}\n\n@keyframes dotOvertaking {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n}\n\n/**\n * ==============================================\n * Experiment-Gooey Effect\n * Dot Shuttle\n * ==============================================\n */\n.dot-shuttle {\n position: relative;\n left: -15px;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n margin: -1px 0;\n filter: blur(2px);\n}\n\n.dot-shuttle::before, .dot-shuttle::after {\n content: '';\n display: inline-block;\n position: absolute;\n top: 0;\n width: 12px;\n height: 12px;\n border-radius: 6px;\n background-color: black;\n color: transparent;\n filter: blur(2px);\n}\n\n.dot-shuttle::before {\n left: 15px;\n animation: dotShuttle 2s infinite ease-out;\n}\n\n.dot-shuttle::after {\n left: 30px;\n}\n\n@keyframes dotShuttle {\n 0%,\n 50%,\n 100% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-45px);\n }\n 75% {\n transform: translateX(45px);\n }\n}\n\n/**\n * ==============================================\n * Experiment-Emoji\n * Dot Bouncing\n * ==============================================\n */\n.dot-bouncing {\n position: relative;\n height: 10px;\n font-size: 10px;\n}\n\n.dot-bouncing::before {\n content: '⚽🏀🏐';\n display: inline-block;\n position: relative;\n animation: dotBouncing 1s infinite;\n}\n\n@keyframes dotBouncing {\n 0% {\n top: -20px;\n animation-timing-function: ease-in;\n }\n 34% {\n transform: scale(1, 1);\n }\n 35% {\n top: 20px;\n animation-timing-function: ease-out;\n transform: scale(1.5, 0.5);\n }\n 45% {\n transform: scale(1, 1);\n }\n 90% {\n top: -20px;\n }\n 100% {\n top: -20px;\n }\n}\n\n/**\n * ==============================================\n * Experiment-Emoji\n * Dot Rolling\n * ==============================================\n */\n.dot-rolling {\n position: relative;\n height: 10px;\n font-size: 10px;\n}\n\n.dot-rolling::before {\n content: '⚽';\n display: inline-block;\n position: relative;\n transform: translateX(-25px);\n animation: dotRolling 3s infinite;\n}\n\n@keyframes dotRolling {\n 0% {\n content: '⚽';\n transform: translateX(-25px) rotateZ(0deg);\n }\n 16.667% {\n content: '⚽';\n transform: translateX(25px) rotateZ(720deg);\n }\n 33.333% {\n content: '⚽';\n transform: translateX(-25px) rotateZ(0deg);\n }\n 34.333% {\n content: '🏀';\n transform: translateX(-25px) rotateZ(0deg);\n }\n 50% {\n content: '🏀';\n transform: translateX(25px) rotateZ(720deg);\n }\n 66.667% {\n content: '🏀';\n transform: translateX(-25px) rotateZ(0deg);\n }\n 67.667% {\n content: '🏐';\n transform: translateX(-25px) rotateZ(0deg);\n }\n 83.333% {\n content: '🏐';\n transform: translateX(25px) rotateZ(720deg);\n }\n 100% {\n content: '🏐';\n transform: translateX(-25px) rotateZ(0deg);\n }\n}\n"]} \ No newline at end of file diff --git a/dist/three-dots.min.css b/dist/three-dots.min.css index 4c3397d..4a59929 100644 --- a/dist/three-dots.min.css +++ b/dist/three-dots.min.css @@ -1 +1,3 @@ -.dot-elastic{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElastic 1s infinite linear}.dot-elastic::before,.dot-elastic::after{content:'';display:inline-block;position:absolute;top:0}.dot-elastic::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticBefore 1s infinite linear}.dot-elastic::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticAfter 1s infinite linear}@keyframes dotElasticBefore{0%{transform:scale(1, 1)}25%{transform:scale(1, 1.5)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElastic{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 1.5)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElasticAfter{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1.5)}100%{transform:scale(1, 1)}}.dot-pulse{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 -5px #9880ff;animation:dotPulse 1.5s infinite linear;animation-delay:.25s}.dot-pulse::before,.dot-pulse::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-pulse::before{box-shadow:9984px 0 0 -5px #9880ff;animation:dotPulseBefore 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px #9880ff;animation:dotPulseAfter 1.5s infinite linear;animation-delay:.5s}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0 -5px #9880ff}30%{box-shadow:9984px 0 0 2px #9880ff}60%,100%{box-shadow:9984px 0 0 -5px #9880ff}}@keyframes dotPulse{0%{box-shadow:9999px 0 0 -5px #9880ff}30%{box-shadow:9999px 0 0 2px #9880ff}60%,100%{box-shadow:9999px 0 0 -5px #9880ff}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0 -5px #9880ff}30%{box-shadow:10014px 0 0 2px #9880ff}60%,100%{box-shadow:10014px 0 0 -5px #9880ff}}.dot-flashing{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.dot-flashing::before,.dot-flashing::after{content:'';display:inline-block;position:absolute;top:0}.dot-flashing::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#9880ff}50%,100%{background-color:#ebe6ff}}.dot-collision{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-collision::before,.dot-collision::after{content:'';display:inline-block;position:absolute;top:0}.dot-collision::before{left:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionBefore 2s infinite ease-in}.dot-collision::after{left:10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionAfter 2s infinite ease-in;animation-delay:1s}@keyframes dotCollisionBefore{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes dotCollisionAfter{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(15px)}}.dot-revolution{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-revolution::before,.dot-revolution::after{content:'';display:inline-block;position:absolute}.dot-revolution::before{left:0;top:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 20px;animation:dotRevolution 1.4s linear infinite}.dot-revolution::after{left:0;top:-30px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 35px;animation:dotRevolution 1s linear infinite}@keyframes dotRevolution{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}.dot-carousel{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotCarousel 1.5s infinite linear}@keyframes dotCarousel{0%{box-shadow:9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff}50%{box-shadow:10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff}100%{box-shadow:9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff}}.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotTyping 1.5s infinite linear}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}16.667%{box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}33.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}50%{box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff}66.667%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}83.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff}100%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}}.dot-windmill{position:relative;top:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 15px;animation:dotWindmill 2s infinite linear}.dot-windmill::before,.dot-windmill::after{content:'';display:inline-block;position:absolute}.dot-windmill::before{left:-8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-windmill::after{left:8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}@keyframes dotWindmill{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(720deg) translate3d(0, 0, 0)}}.dot-bricks{position:relative;top:8px;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff;animation:dotBricks 2s infinite ease}@keyframes dotBricks{0%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}8.333%{box-shadow:10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}16.667%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff}25%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}33.333%{box-shadow:10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}41.667%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}50%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}58.333%{box-shadow:9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}66.666%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff}75%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}83.333%{box-shadow:9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}91.667%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}100%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}}.dot-floating{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1)}.dot-floating::before,.dot-floating::after{content:'';display:inline-block;position:absolute;top:0}.dot-floating::before{left:-12px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingBefore 3s infinite ease-in-out}.dot-floating::after{left:-24px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1)}@keyframes dotFloating{0%{left:calc(-50% - 5px)}75%{left:calc(50% + 105px)}100%{left:calc(50% + 105px)}}@keyframes dotFloatingBefore{0%{left:-50px}50%{left:-12px}75%{left:-50px}100%{left:-50px}}@keyframes dotFloatingAfter{0%{left:-100px}50%{left:-24px}75%{left:-100px}100%{left:-100px}}.dot-fire{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-.85s}.dot-fire::before,.dot-fire::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-fire::before{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-1.85s}.dot-fire::after{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-2.85s}@keyframes dotFire{1%{box-shadow:9999px 22.5px 0 -5px #9880ff}50%{box-shadow:9999px -5.625px 0 2px #9880ff}100%{box-shadow:9999px -22.5px 0 -5px #9880ff}}.dot-spin{position:relative;width:10px;height:10px;border-radius:5px;background-color:rgba(0,0,0,0);color:rgba(0,0,0,0);box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72984px 12.72984px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72984px -12.72984px 0 0 rgba(152,128,255,0);animation:dotSpin 1.5s infinite linear}@keyframes dotSpin{0%,100%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}12.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}25%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}37.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}50%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}62.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}75%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}87.5%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 0 #9880ff}}.dot-falling{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 0 #9880ff;animation:dotFalling 1s infinite linear;animation-delay:.1s}.dot-falling::before,.dot-falling::after{content:'';display:inline-block;position:absolute;top:0}.dot-falling::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingBefore 1s infinite linear;animation-delay:0s}.dot-falling::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingAfter 1s infinite linear;animation-delay:.2s}@keyframes dotFalling{0%{box-shadow:9999px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9999px 0 0 0 #9880ff}100%{box-shadow:9999px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingBefore{0%{box-shadow:9984px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9984px 0 0 0 #9880ff}100%{box-shadow:9984px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingAfter{0%{box-shadow:10014px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:10014px 0 0 0 #9880ff}100%{box-shadow:10014px 15px 0 0 rgba(152,128,255,0)}}.dot-stretching{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform:scale(1.25, 1.25);animation:dotStretching 2s infinite ease-in}.dot-stretching::before,.dot-stretching::after{content:'';display:inline-block;position:absolute;top:0}.dot-stretching::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingBefore 2s infinite ease-in}.dot-stretching::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingAfter 2s infinite ease-in}@keyframes dotStretching{0%{transform:scale(1.25, 1.25)}50%,60%{transform:scale(.8, .8)}100%{transform:scale(1.25, 1.25)}}@keyframes dotStretchingBefore{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(-20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}@keyframes dotStretchingAfter{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}.dot-gathering{position:relative;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-gathering::before,.dot-gathering::after{content:'';display:inline-block;position:absolute;top:0;left:-50px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);opacity:0;filter:blur(2px);animation:dotGathering 2s infinite ease-in}.dot-gathering::after{animation-delay:.5s}@keyframes dotGathering{0%{opacity:0;transform:translateX(0)}35%,60%{opacity:1;transform:translateX(50px)}100%{opacity:0;transform:translateX(100px)}}.dot-hourglass{position:relative;top:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px);transform-origin:5px 20px;animation:dotHourglass 2.4s infinite ease-in-out;animation-delay:.6s}.dot-hourglass::before,.dot-hourglass::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-hourglass::before{top:30px}.dot-hourglass::after{animation:dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1)}@keyframes dotHourglass{0%{transform:rotateZ(0deg)}25%{transform:rotateZ(180deg)}50%{transform:rotateZ(180deg)}75%{transform:rotateZ(360deg)}100%{transform:rotateZ(360deg)}}@keyframes dotHourglassAfter{0%{transform:translateY(0)}25%{transform:translateY(30px)}50%{transform:translateY(30px)}75%{transform:translateY(0)}100%{transform:translateY(0)}}.dot-overtaking{position:relative;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;margin:-1px 0;box-shadow:0 -20px 0 0;filter:blur(2px);animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2)}.dot-overtaking::before,.dot-overtaking::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;box-shadow:0 -20px 0 0;filter:blur(2px)}.dot-overtaking::before{animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.3s}.dot-overtaking::after{animation:dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.6s}@keyframes dotOvertaking{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}.dot-shuttle{position:relative;left:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-shuttle::before,.dot-shuttle::after{content:'';display:inline-block;position:absolute;top:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-shuttle::before{left:15px;animation:dotShuttle 2s infinite ease-out}.dot-shuttle::after{left:30px}@keyframes dotShuttle{0%,50%,100%{transform:translateX(0)}25%{transform:translateX(-45px)}75%{transform:translateX(45px)}}.dot-bouncing{position:relative;height:10px;font-size:10px}.dot-bouncing::before{content:'⚽🏀🏐';display:inline-block;position:relative;animation:dotBouncing 1s infinite}@keyframes dotBouncing{0%{top:-20px;animation-timing-function:ease-in}34%{transform:scale(1, 1)}35%{top:20px;animation-timing-function:ease-out;transform:scale(1.5, 0.5)}45%{transform:scale(1, 1)}90%{top:-20px}100%{top:-20px}}.dot-rolling{position:relative;height:10px;font-size:10px}.dot-rolling::before{content:'⚽';display:inline-block;position:relative;transform:translateX(-25px);animation:dotRolling 3s infinite}@keyframes dotRolling{0%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}16.667%{content:'⚽';transform:translateX(25px) rotateZ(720deg)}33.333%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}34.333%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}50%{content:'🏀';transform:translateX(25px) rotateZ(720deg)}66.667%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}67.667%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}83.333%{content:'🏐';transform:translateX(25px) rotateZ(720deg)}100%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}} +.dot-elastic{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElastic 1s infinite linear}.dot-elastic::before,.dot-elastic::after{content:'';display:inline-block;position:absolute;top:0}.dot-elastic::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticBefore 1s infinite linear}.dot-elastic::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticAfter 1s infinite linear}@keyframes dotElasticBefore{0%{transform:scale(1, 1)}25%{transform:scale(1, 1.5)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElastic{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 1.5)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElasticAfter{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1.5)}100%{transform:scale(1, 1)}}.dot-pulse{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 -5px #9880ff;animation:dotPulse 1.5s infinite linear;animation-delay:.25s}.dot-pulse::before,.dot-pulse::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-pulse::before{box-shadow:9984px 0 0 -5px #9880ff;animation:dotPulseBefore 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px #9880ff;animation:dotPulseAfter 1.5s infinite linear;animation-delay:.5s}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0 -5px #9880ff}30%{box-shadow:9984px 0 0 2px #9880ff}60%,100%{box-shadow:9984px 0 0 -5px #9880ff}}@keyframes dotPulse{0%{box-shadow:9999px 0 0 -5px #9880ff}30%{box-shadow:9999px 0 0 2px #9880ff}60%,100%{box-shadow:9999px 0 0 -5px #9880ff}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0 -5px #9880ff}30%{box-shadow:10014px 0 0 2px #9880ff}60%,100%{box-shadow:10014px 0 0 -5px #9880ff}}.dot-flashing{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.dot-flashing::before,.dot-flashing::after{content:'';display:inline-block;position:absolute;top:0}.dot-flashing::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#9880ff}50%,100%{background-color:#ebe6ff}}.dot-collision{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-collision::before,.dot-collision::after{content:'';display:inline-block;position:absolute;top:0}.dot-collision::before{left:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionBefore 2s infinite ease-in}.dot-collision::after{left:10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionAfter 2s infinite ease-in;animation-delay:1s}@keyframes dotCollisionBefore{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes dotCollisionAfter{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(15px)}}.dot-revolution{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-revolution::before,.dot-revolution::after{content:'';display:inline-block;position:absolute}.dot-revolution::before{left:0;top:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 20px;animation:dotRevolution 1.4s linear infinite}.dot-revolution::after{left:0;top:-30px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 35px;animation:dotRevolution 1s linear infinite}@keyframes dotRevolution{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}.dot-carousel{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotCarousel 1.5s infinite linear}@keyframes dotCarousel{0%{box-shadow:9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff}50%{box-shadow:10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff}100%{box-shadow:9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff}}.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotTyping 1.5s infinite linear}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}16.667%{box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}33.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}50%{box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff}66.667%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}83.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff}100%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}}.dot-windmill{position:relative;top:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 15px;animation:dotWindmill 2s infinite linear}.dot-windmill::before,.dot-windmill::after{content:'';display:inline-block;position:absolute}.dot-windmill::before{left:-8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-windmill::after{left:8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}@keyframes dotWindmill{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(720deg) translate3d(0, 0, 0)}}.dot-bricks{position:relative;top:8px;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff;animation:dotBricks 2s infinite ease}@keyframes dotBricks{0%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}8.333%{box-shadow:10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}16.667%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff}25%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}33.333%{box-shadow:10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}41.667%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}50%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}58.333%{box-shadow:9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}66.666%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff}75%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}83.333%{box-shadow:9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}91.667%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}100%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}}.dot-floating{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1)}.dot-floating::before,.dot-floating::after{content:'';display:inline-block;position:absolute;top:0}.dot-floating::before{left:-12px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingBefore 3s infinite ease-in-out}.dot-floating::after{left:-24px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1)}@keyframes dotFloating{0%{left:calc(-50% - 5px)}75%{left:calc(50% + 105px)}100%{left:calc(50% + 105px)}}@keyframes dotFloatingBefore{0%{left:-50px}50%{left:-12px}75%{left:-50px}100%{left:-50px}}@keyframes dotFloatingAfter{0%{left:-100px}50%{left:-24px}75%{left:-100px}100%{left:-100px}}.dot-fire{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-.85s}.dot-fire::before,.dot-fire::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-fire::before{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-1.85s}.dot-fire::after{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-2.85s}@keyframes dotFire{1%{box-shadow:9999px 22.5px 0 -5px #9880ff}50%{box-shadow:9999px -5.625px 0 2px #9880ff}100%{box-shadow:9999px -22.5px 0 -5px #9880ff}}.dot-spin{position:relative;width:10px;height:10px;border-radius:5px;background-color:rgba(0,0,0,0);color:rgba(0,0,0,0);box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72984px 12.72984px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72984px -12.72984px 0 0 rgba(152,128,255,0);animation:dotSpin 1.5s infinite linear}@keyframes dotSpin{0%,100%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}12.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}25%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}37.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}50%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}62.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}75%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}87.5%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 0 #9880ff}}.dot-falling{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 0 #9880ff;animation:dotFalling 1s infinite linear;animation-delay:.1s}.dot-falling::before,.dot-falling::after{content:'';display:inline-block;position:absolute;top:0}.dot-falling::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingBefore 1s infinite linear;animation-delay:0s}.dot-falling::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingAfter 1s infinite linear;animation-delay:.2s}@keyframes dotFalling{0%{box-shadow:9999px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9999px 0 0 0 #9880ff}100%{box-shadow:9999px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingBefore{0%{box-shadow:9984px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9984px 0 0 0 #9880ff}100%{box-shadow:9984px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingAfter{0%{box-shadow:10014px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:10014px 0 0 0 #9880ff}100%{box-shadow:10014px 15px 0 0 rgba(152,128,255,0)}}.dot-stretching{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform:scale(1.25, 1.25);animation:dotStretching 2s infinite ease-in}.dot-stretching::before,.dot-stretching::after{content:'';display:inline-block;position:absolute;top:0}.dot-stretching::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingBefore 2s infinite ease-in}.dot-stretching::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingAfter 2s infinite ease-in}@keyframes dotStretching{0%{transform:scale(1.25, 1.25)}50%,60%{transform:scale(.8, .8)}100%{transform:scale(1.25, 1.25)}}@keyframes dotStretchingBefore{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(-20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}@keyframes dotStretchingAfter{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}.dot-gathering{position:relative;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-gathering::before,.dot-gathering::after{content:'';display:inline-block;position:absolute;top:0;left:-50px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);opacity:0;filter:blur(2px);animation:dotGathering 2s infinite ease-in}.dot-gathering::after{animation-delay:.5s}@keyframes dotGathering{0%{opacity:0;transform:translateX(0)}35%,60%{opacity:1;transform:translateX(50px)}100%{opacity:0;transform:translateX(100px)}}.dot-hourglass{position:relative;top:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px);transform-origin:5px 20px;animation:dotHourglass 2.4s infinite ease-in-out;animation-delay:.6s}.dot-hourglass::before,.dot-hourglass::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-hourglass::before{top:30px}.dot-hourglass::after{animation:dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1)}@keyframes dotHourglass{0%{transform:rotateZ(0deg)}25%{transform:rotateZ(180deg)}50%{transform:rotateZ(180deg)}75%{transform:rotateZ(360deg)}100%{transform:rotateZ(360deg)}}@keyframes dotHourglassAfter{0%{transform:translateY(0)}25%{transform:translateY(30px)}50%{transform:translateY(30px)}75%{transform:translateY(0)}100%{transform:translateY(0)}}.dot-overtaking{position:relative;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;margin:-1px 0;box-shadow:0 -20px 0 0;filter:blur(2px);animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2)}.dot-overtaking::before,.dot-overtaking::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;box-shadow:0 -20px 0 0;filter:blur(2px)}.dot-overtaking::before{animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.3s}.dot-overtaking::after{animation:dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.6s}@keyframes dotOvertaking{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}.dot-shuttle{position:relative;left:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-shuttle::before,.dot-shuttle::after{content:'';display:inline-block;position:absolute;top:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-shuttle::before{left:15px;animation:dotShuttle 2s infinite ease-out}.dot-shuttle::after{left:30px}@keyframes dotShuttle{0%,50%,100%{transform:translateX(0)}25%{transform:translateX(-45px)}75%{transform:translateX(45px)}}.dot-bouncing{position:relative;height:10px;font-size:10px}.dot-bouncing::before{content:'⚽🏀🏐';display:inline-block;position:relative;animation:dotBouncing 1s infinite}@keyframes dotBouncing{0%{top:-20px;animation-timing-function:ease-in}34%{transform:scale(1, 1)}35%{top:20px;animation-timing-function:ease-out;transform:scale(1.5, 0.5)}45%{transform:scale(1, 1)}90%{top:-20px}100%{top:-20px}}.dot-rolling{position:relative;height:10px;font-size:10px}.dot-rolling::before{content:'⚽';display:inline-block;position:relative;transform:translateX(-25px);animation:dotRolling 3s infinite}@keyframes dotRolling{0%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}16.667%{content:'⚽';transform:translateX(25px) rotateZ(720deg)}33.333%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}34.333%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}50%{content:'🏀';transform:translateX(25px) rotateZ(720deg)}66.667%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}67.667%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}83.333%{content:'🏐';transform:translateX(25px) rotateZ(720deg)}100%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}} + +/*# sourceMappingURL=three-dots.min.css.map */ \ No newline at end of file diff --git a/dist/three-dots.min.css.map b/dist/three-dots.min.css.map new file mode 100644 index 0000000..93f504e --- /dev/null +++ b/dist/three-dots.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["three-dots.min.css"],"names":[],"mappings":"AAAA,aAAa,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,uCAAuC,CAAC,yCAAyC,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,qBAAqB,WAAW,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,6CAA6C,CAAC,oBAAoB,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,4CAA4C,CAAC,4BAA4B,GAAG,qBAAqB,CAAC,IAAI,uBAAuB,CAAC,IAAI,wBAAwB,CAAC,IAAI,qBAAqB,CAAC,KAAK,qBAAqB,CAAC,CAAC,sBAAsB,GAAG,qBAAqB,CAAC,IAAI,qBAAqB,CAAC,IAAI,uBAAuB,CAAC,IAAI,qBAAqB,CAAC,KAAK,qBAAqB,CAAC,CAAC,2BAA2B,GAAG,qBAAqB,CAAC,IAAI,qBAAqB,CAAC,IAAI,wBAAwB,CAAC,IAAI,uBAAuB,CAAC,KAAK,qBAAqB,CAAC,CAAC,WAAW,kBAAkB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,mCAAmC,wCAAwC,oBAAoB,CAAC,qCAAqC,WAAW,qBAAqB,kBAAkB,MAAM,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,mBAAmB,mCAAmC,8CAA8C,kBAAkB,CAAC,kBAAkB,oCAAoC,6CAA6C,mBAAmB,CAAC,0BAA0B,GAAG,kCAAkC,CAAC,IAAI,iCAAiC,CAAC,SAAS,kCAAkC,CAAC,CAAC,oBAAoB,GAAG,kCAAkC,CAAC,IAAI,iCAAiC,CAAC,SAAS,kCAAkC,CAAC,CAAC,yBAAyB,GAAG,mCAAmC,CAAC,IAAI,kCAAkC,CAAC,SAAS,mCAAmC,CAAC,CAAC,cAAc,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,mDAAmD,mBAAmB,CAAC,2CAA2C,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,sBAAsB,WAAW,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,4CAA4C,kBAAkB,CAAC,qBAAqB,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,4CAA4C,kBAAkB,CAAC,uBAAuB,GAAG,wBAAwB,CAAC,SAAS,wBAAwB,CAAC,CAAC,eAAe,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,6CAA6C,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,uBAAuB,WAAW,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,gDAAgD,CAAC,sBAAsB,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,gDAAgD,kBAAkB,CAAC,8BAA8B,gBAAgB,uBAAuB,CAAC,IAAI,2BAA2B,CAAC,CAAC,6BAA6B,gBAAgB,uBAAuB,CAAC,IAAI,0BAA0B,CAAC,CAAC,gBAAgB,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,+CAA+C,WAAW,qBAAqB,iBAAiB,CAAC,wBAAwB,OAAO,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,0BAA0B,4CAA4C,CAAC,uBAAuB,OAAO,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,0BAA0B,0CAA0C,CAAC,yBAAyB,GAAG,4CAA4C,CAAC,KAAK,8CAA8C,CAAC,CAAC,cAAc,kBAAkB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,2EAA2E,0CAA0C,CAAC,uBAAuB,GAAG,kFAAkF,CAAC,IAAI,kFAAkF,CAAC,KAAK,kFAAkF,CAAC,CAAC,YAAY,kBAAkB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,2EAA2E,wCAAwC,CAAC,qBAAqB,GAAG,0EAA0E,CAAC,QAAQ,8EAA8E,CAAC,QAAQ,0EAA0E,CAAC,IAAI,8EAA8E,CAAC,QAAQ,0EAA0E,CAAC,QAAQ,8EAA8E,CAAC,KAAK,0EAA0E,CAAC,CAAC,cAAc,kBAAkB,UAAU,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,0BAA0B,wCAAwC,CAAC,2CAA2C,WAAW,qBAAqB,iBAAiB,CAAC,sBAAsB,aAAa,SAAS,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,qBAAqB,YAAY,SAAS,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,uBAAuB,GAAG,4CAA4C,CAAC,KAAK,8CAA8C,CAAC,CAAC,YAAY,kBAAkB,QAAQ,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,+EAA+E,oCAAoC,CAAC,qBAAqB,GAAG,8EAA8E,CAAC,OAAO,+EAA+E,CAAC,QAAQ,mFAAmF,CAAC,IAAI,kFAAkF,CAAC,QAAQ,8EAA8E,CAAC,QAAQ,+EAA+E,CAAC,IAAI,mFAAmF,CAAC,QAAQ,kFAAkF,CAAC,QAAQ,8EAA8E,CAAC,IAAI,+EAA+E,CAAC,QAAQ,mFAAmF,CAAC,QAAQ,kFAAkF,CAAC,KAAK,8EAA8E,CAAC,CAAC,cAAc,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,mEAAmE,CAAC,2CAA2C,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,sBAAsB,WAAW,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,mDAAmD,CAAC,qBAAqB,WAAW,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,iEAAiE,CAAC,uBAAuB,GAAG,qBAAqB,CAAC,IAAI,sBAAsB,CAAC,KAAK,sBAAsB,CAAC,CAAC,6BAA6B,GAAG,UAAU,CAAC,IAAI,UAAU,CAAC,IAAI,UAAU,CAAC,KAAK,UAAU,CAAC,CAAC,4BAA4B,GAAG,WAAW,CAAC,IAAI,UAAU,CAAC,IAAI,WAAW,CAAC,KAAK,WAAW,CAAC,CAAC,UAAU,kBAAkB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,wCAAwC,uCAAuC,qBAAqB,CAAC,mCAAmC,WAAW,qBAAqB,kBAAkB,MAAM,WAAW,YAAY,kBAAkB,yBAAyB,aAAa,CAAC,kBAAkB,wCAAwC,uCAAuC,sBAAsB,CAAC,iBAAiB,wCAAwC,uCAAuC,sBAAsB,CAAC,mBAAmB,GAAG,uCAAuC,CAAC,IAAI,wCAAwC,CAAC,KAAK,wCAAwC,CAAC,CAAC,UAAU,kBAAkB,WAAW,YAAY,kBAAkB,+BAA+B,oBAAoB,iSAAiS,sCAAsC,CAAC,mBAAmB,QAAQ,+SAA+S,CAAC,MAAM,+SAA+S,CAAC,IAAI,+SAA+S,CAAC,MAAM,+SAA+S,CAAC,IAAI,+SAA+S,CAAC,MAAM,+SAA+S,CAAC,IAAI,+SAA+S,CAAC,MAAM,+SAA+S,CAAC,CAAC,aAAa,kBAAkB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,gCAAgC,wCAAwC,mBAAmB,CAAC,yCAAyC,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,qBAAqB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,8CAA8C,kBAAkB,CAAC,oBAAoB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,6CAA6C,mBAAmB,CAAC,sBAAsB,GAAG,+CAA+C,CAAC,YAAY,+BAA+B,CAAC,KAAK,8CAA8C,CAAC,CAAC,4BAA4B,GAAG,+CAA+C,CAAC,YAAY,+BAA+B,CAAC,KAAK,8CAA8C,CAAC,CAAC,2BAA2B,GAAG,gDAAgD,CAAC,YAAY,gCAAgC,CAAC,KAAK,+CAA+C,CAAC,CAAC,gBAAgB,kBAAkB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,4BAA4B,2CAA2C,CAAC,+CAA+C,WAAW,qBAAqB,kBAAkB,KAAK,CAAC,wBAAwB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,iDAAiD,CAAC,uBAAuB,WAAW,YAAY,kBAAkB,yBAAyB,cAAc,gDAAgD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,QAAQ,uBAAuB,CAAC,KAAK,2BAA2B,CAAC,CAAC,+BAA+B,GAAG,oCAAoC,CAAC,QAAQ,sCAAsC,CAAC,KAAK,oCAAoC,CAAC,CAAC,8BAA8B,GAAG,oCAAoC,CAAC,QAAQ,qCAAqC,CAAC,KAAK,oCAAoC,CAAC,CAAC,eAAe,kBAAkB,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,cAAc,gBAAgB,CAAC,6CAA6C,WAAW,qBAAqB,kBAAkB,MAAM,WAAW,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,UAAU,iBAAiB,0CAA0C,CAAC,sBAAsB,mBAAmB,CAAC,wBAAwB,GAAG,UAAU,uBAAuB,CAAC,QAAQ,UAAU,0BAA0B,CAAC,KAAK,UAAU,2BAA2B,CAAC,CAAC,eAAe,kBAAkB,UAAU,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,cAAc,iBAAiB,0BAA0B,iDAAiD,mBAAmB,CAAC,6CAA6C,WAAW,qBAAqB,kBAAkB,MAAM,OAAO,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,gBAAgB,CAAC,uBAAuB,QAAQ,CAAC,sBAAsB,2EAA2E,CAAC,wBAAwB,GAAG,uBAAuB,CAAC,IAAI,yBAAyB,CAAC,IAAI,yBAAyB,CAAC,IAAI,yBAAyB,CAAC,KAAK,yBAAyB,CAAC,CAAC,6BAA6B,GAAG,uBAAuB,CAAC,IAAI,0BAA0B,CAAC,IAAI,0BAA0B,CAAC,IAAI,uBAAuB,CAAC,KAAK,uBAAuB,CAAC,CAAC,gBAAgB,kBAAkB,WAAW,YAAY,kBAAkB,+BAA+B,WAAW,cAAc,uBAAuB,iBAAiB,oEAAoE,CAAC,+CAA+C,WAAW,qBAAqB,kBAAkB,MAAM,OAAO,WAAW,YAAY,kBAAkB,+BAA+B,WAAW,uBAAuB,gBAAgB,CAAC,wBAAwB,qEAAqE,mBAAmB,CAAC,uBAAuB,uEAAuE,mBAAmB,CAAC,yBAAyB,GAAG,uBAAuB,CAAC,KAAK,yBAAyB,CAAC,CAAC,aAAa,kBAAkB,WAAW,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,cAAc,gBAAgB,CAAC,yCAAyC,WAAW,qBAAqB,kBAAkB,MAAM,WAAW,YAAY,kBAAkB,sBAAsB,oBAAoB,gBAAgB,CAAC,qBAAqB,UAAU,yCAAyC,CAAC,oBAAoB,SAAS,CAAC,sBAAsB,YAAY,uBAAuB,CAAC,IAAI,2BAA2B,CAAC,IAAI,0BAA0B,CAAC,CAAC,cAAc,kBAAkB,YAAY,cAAc,CAAC,sBAAsB,gBAAgB,qBAAqB,kBAAkB,iCAAiC,CAAC,uBAAuB,GAAG,UAAU,iCAAiC,CAAC,IAAI,qBAAqB,CAAC,IAAI,SAAS,mCAAmC,yBAAyB,CAAC,IAAI,qBAAqB,CAAC,IAAI,SAAS,CAAC,KAAK,SAAS,CAAC,CAAC,aAAa,kBAAkB,YAAY,cAAc,CAAC,qBAAqB,YAAY,qBAAqB,kBAAkB,4BAA4B,gCAAgC,CAAC,sBAAsB,GAAG,YAAY,yCAAyC,CAAC,QAAQ,YAAY,0CAA0C,CAAC,QAAQ,YAAY,yCAAyC,CAAC,QAAQ,aAAa,yCAAyC,CAAC,IAAI,aAAa,0CAA0C,CAAC,QAAQ,aAAa,yCAAyC,CAAC,QAAQ,aAAa,yCAAyC,CAAC,QAAQ,aAAa,0CAA0C,CAAC,KAAK,aAAa,yCAAyC,CAAC,CAAC","file":"three-dots.min.css","sourcesContent":[".dot-elastic{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElastic 1s infinite linear}.dot-elastic::before,.dot-elastic::after{content:'';display:inline-block;position:absolute;top:0}.dot-elastic::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticBefore 1s infinite linear}.dot-elastic::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotElasticAfter 1s infinite linear}@keyframes dotElasticBefore{0%{transform:scale(1, 1)}25%{transform:scale(1, 1.5)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElastic{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 1.5)}75%{transform:scale(1, 1)}100%{transform:scale(1, 1)}}@keyframes dotElasticAfter{0%{transform:scale(1, 1)}25%{transform:scale(1, 1)}50%{transform:scale(1, 0.67)}75%{transform:scale(1, 1.5)}100%{transform:scale(1, 1)}}.dot-pulse{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 -5px #9880ff;animation:dotPulse 1.5s infinite linear;animation-delay:.25s}.dot-pulse::before,.dot-pulse::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-pulse::before{box-shadow:9984px 0 0 -5px #9880ff;animation:dotPulseBefore 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px #9880ff;animation:dotPulseAfter 1.5s infinite linear;animation-delay:.5s}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0 -5px #9880ff}30%{box-shadow:9984px 0 0 2px #9880ff}60%,100%{box-shadow:9984px 0 0 -5px #9880ff}}@keyframes dotPulse{0%{box-shadow:9999px 0 0 -5px #9880ff}30%{box-shadow:9999px 0 0 2px #9880ff}60%,100%{box-shadow:9999px 0 0 -5px #9880ff}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0 -5px #9880ff}30%{box-shadow:10014px 0 0 2px #9880ff}60%,100%{box-shadow:10014px 0 0 -5px #9880ff}}.dot-flashing{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.dot-flashing::before,.dot-flashing::after{content:'';display:inline-block;position:absolute;top:0}.dot-flashing::before{left:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing::after{left:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFlashing 1s infinite alternate;animation-delay:1s}@keyframes dotFlashing{0%{background-color:#9880ff}50%,100%{background-color:#ebe6ff}}.dot-collision{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-collision::before,.dot-collision::after{content:'';display:inline-block;position:absolute;top:0}.dot-collision::before{left:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionBefore 2s infinite ease-in}.dot-collision::after{left:10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotCollisionAfter 2s infinite ease-in;animation-delay:1s}@keyframes dotCollisionBefore{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(-15px)}}@keyframes dotCollisionAfter{0%,50%,75%,100%{transform:translateX(0)}25%{transform:translateX(15px)}}.dot-revolution{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-revolution::before,.dot-revolution::after{content:'';display:inline-block;position:absolute}.dot-revolution::before{left:0;top:-15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 20px;animation:dotRevolution 1.4s linear infinite}.dot-revolution::after{left:0;top:-30px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 35px;animation:dotRevolution 1s linear infinite}@keyframes dotRevolution{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}.dot-carousel{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotCarousel 1.5s infinite linear}@keyframes dotCarousel{0%{box-shadow:9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff}50%{box-shadow:10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff,9999px 0 0 1px #9880ff}100%{box-shadow:9999px 0 0 1px #9880ff,10014px 0 0 -1px #9880ff,9984px 0 0 -1px #9880ff}}.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotTyping 1.5s infinite linear}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}16.667%{box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}33.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}50%{box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff}66.667%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}83.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff}100%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}}.dot-windmill{position:relative;top:-10px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform-origin:5px 15px;animation:dotWindmill 2s infinite linear}.dot-windmill::before,.dot-windmill::after{content:'';display:inline-block;position:absolute}.dot-windmill::before{left:-8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-windmill::after{left:8.66px;top:15px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}@keyframes dotWindmill{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(720deg) translate3d(0, 0, 0)}}.dot-bricks{position:relative;top:8px;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff;animation:dotBricks 2s infinite ease}@keyframes dotBricks{0%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}8.333%{box-shadow:10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}16.667%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff}25%{box-shadow:10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}33.333%{box-shadow:10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}41.667%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff}50%{box-shadow:10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}58.333%{box-shadow:9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff,9991px -16px 0 0 #9880ff}66.666%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,9991px -16px 0 0 #9880ff}75%{box-shadow:9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}83.333%{box-shadow:9991px -16px 0 0 #9880ff,10007px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}91.667%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px -16px 0 0 #9880ff}100%{box-shadow:9991px -16px 0 0 #9880ff,9991px 0 0 0 #9880ff,10007px 0 0 0 #9880ff}}.dot-floating{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1)}.dot-floating::before,.dot-floating::after{content:'';display:inline-block;position:absolute;top:0}.dot-floating::before{left:-12px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingBefore 3s infinite ease-in-out}.dot-floating::after{left:-24px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1)}@keyframes dotFloating{0%{left:calc(-50% - 5px)}75%{left:calc(50% + 105px)}100%{left:calc(50% + 105px)}}@keyframes dotFloatingBefore{0%{left:-50px}50%{left:-12px}75%{left:-50px}100%{left:-50px}}@keyframes dotFloatingAfter{0%{left:-100px}50%{left:-24px}75%{left:-100px}100%{left:-100px}}.dot-fire{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-.85s}.dot-fire::before,.dot-fire::after{content:'';display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff}.dot-fire::before{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-1.85s}.dot-fire::after{box-shadow:9999px 22.5px 0 -5px #9880ff;animation:dotFire 1.5s infinite linear;animation-delay:-2.85s}@keyframes dotFire{1%{box-shadow:9999px 22.5px 0 -5px #9880ff}50%{box-shadow:9999px -5.625px 0 2px #9880ff}100%{box-shadow:9999px -22.5px 0 -5px #9880ff}}.dot-spin{position:relative;width:10px;height:10px;border-radius:5px;background-color:rgba(0,0,0,0);color:rgba(0,0,0,0);box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 rgba(152,128,255,0),0 18px 0 0 rgba(152,128,255,0),-12.72984px 12.72984px 0 0 rgba(152,128,255,0),-18px 0 0 0 rgba(152,128,255,0),-12.72984px -12.72984px 0 0 rgba(152,128,255,0);animation:dotSpin 1.5s infinite linear}@keyframes dotSpin{0%,100%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}12.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 0 #9880ff,18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}25%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 0 #9880ff,12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}37.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 0 #9880ff,0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}50%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 0 #9880ff,-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 -5px rgba(152,128,255,0)}62.5%{box-shadow:0 -18px 0 -5px rgba(152,128,255,0),12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 0 #9880ff,-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}75%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 -5px rgba(152,128,255,0),18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 0 #9880ff,-12.72984px -12.72984px 0 0 #9880ff}87.5%{box-shadow:0 -18px 0 0 #9880ff,12.72984px -12.72984px 0 0 #9880ff,18px 0 0 -5px rgba(152,128,255,0),12.72984px 12.72984px 0 -5px rgba(152,128,255,0),0 18px 0 -5px rgba(152,128,255,0),-12.72984px 12.72984px 0 -5px rgba(152,128,255,0),-18px 0 0 -5px rgba(152,128,255,0),-12.72984px -12.72984px 0 0 #9880ff}}.dot-falling{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9999px 0 0 0 #9880ff;animation:dotFalling 1s infinite linear;animation-delay:.1s}.dot-falling::before,.dot-falling::after{content:'';display:inline-block;position:absolute;top:0}.dot-falling::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingBefore 1s infinite linear;animation-delay:0s}.dot-falling::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotFallingAfter 1s infinite linear;animation-delay:.2s}@keyframes dotFalling{0%{box-shadow:9999px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9999px 0 0 0 #9880ff}100%{box-shadow:9999px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingBefore{0%{box-shadow:9984px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:9984px 0 0 0 #9880ff}100%{box-shadow:9984px 15px 0 0 rgba(152,128,255,0)}}@keyframes dotFallingAfter{0%{box-shadow:10014px -15px 0 0 rgba(152,128,255,0)}25%,50%,75%{box-shadow:10014px 0 0 0 #9880ff}100%{box-shadow:10014px 15px 0 0 rgba(152,128,255,0)}}.dot-stretching{position:relative;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;transform:scale(1.25, 1.25);animation:dotStretching 2s infinite ease-in}.dot-stretching::before,.dot-stretching::after{content:'';display:inline-block;position:absolute;top:0}.dot-stretching::before{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingBefore 2s infinite ease-in}.dot-stretching::after{width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;animation:dotStretchingAfter 2s infinite ease-in}@keyframes dotStretching{0%{transform:scale(1.25, 1.25)}50%,60%{transform:scale(.8, .8)}100%{transform:scale(1.25, 1.25)}}@keyframes dotStretchingBefore{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(-20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}@keyframes dotStretchingAfter{0%{transform:translate(0) scale(.7, .7)}50%,60%{transform:translate(20px) scale(1, 1)}100%{transform:translate(0) scale(.7, .7)}}.dot-gathering{position:relative;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-gathering::before,.dot-gathering::after{content:'';display:inline-block;position:absolute;top:0;left:-50px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);opacity:0;filter:blur(2px);animation:dotGathering 2s infinite ease-in}.dot-gathering::after{animation-delay:.5s}@keyframes dotGathering{0%{opacity:0;transform:translateX(0)}35%,60%{opacity:1;transform:translateX(50px)}100%{opacity:0;transform:translateX(100px)}}.dot-hourglass{position:relative;top:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px);transform-origin:5px 20px;animation:dotHourglass 2.4s infinite ease-in-out;animation-delay:.6s}.dot-hourglass::before,.dot-hourglass::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-hourglass::before{top:30px}.dot-hourglass::after{animation:dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1)}@keyframes dotHourglass{0%{transform:rotateZ(0deg)}25%{transform:rotateZ(180deg)}50%{transform:rotateZ(180deg)}75%{transform:rotateZ(360deg)}100%{transform:rotateZ(360deg)}}@keyframes dotHourglassAfter{0%{transform:translateY(0)}25%{transform:translateY(30px)}50%{transform:translateY(30px)}75%{transform:translateY(0)}100%{transform:translateY(0)}}.dot-overtaking{position:relative;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;margin:-1px 0;box-shadow:0 -20px 0 0;filter:blur(2px);animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2)}.dot-overtaking::before,.dot-overtaking::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:12px;height:12px;border-radius:6px;background-color:rgba(0,0,0,0);color:#000;box-shadow:0 -20px 0 0;filter:blur(2px)}.dot-overtaking::before{animation:dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.3s}.dot-overtaking::after{animation:dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);animation-delay:.6s}@keyframes dotOvertaking{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}.dot-shuttle{position:relative;left:-15px;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);margin:-1px 0;filter:blur(2px)}.dot-shuttle::before,.dot-shuttle::after{content:'';display:inline-block;position:absolute;top:0;width:12px;height:12px;border-radius:6px;background-color:#000;color:rgba(0,0,0,0);filter:blur(2px)}.dot-shuttle::before{left:15px;animation:dotShuttle 2s infinite ease-out}.dot-shuttle::after{left:30px}@keyframes dotShuttle{0%,50%,100%{transform:translateX(0)}25%{transform:translateX(-45px)}75%{transform:translateX(45px)}}.dot-bouncing{position:relative;height:10px;font-size:10px}.dot-bouncing::before{content:'⚽🏀🏐';display:inline-block;position:relative;animation:dotBouncing 1s infinite}@keyframes dotBouncing{0%{top:-20px;animation-timing-function:ease-in}34%{transform:scale(1, 1)}35%{top:20px;animation-timing-function:ease-out;transform:scale(1.5, 0.5)}45%{transform:scale(1, 1)}90%{top:-20px}100%{top:-20px}}.dot-rolling{position:relative;height:10px;font-size:10px}.dot-rolling::before{content:'⚽';display:inline-block;position:relative;transform:translateX(-25px);animation:dotRolling 3s infinite}@keyframes dotRolling{0%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}16.667%{content:'⚽';transform:translateX(25px) rotateZ(720deg)}33.333%{content:'⚽';transform:translateX(-25px) rotateZ(0deg)}34.333%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}50%{content:'🏀';transform:translateX(25px) rotateZ(720deg)}66.667%{content:'🏀';transform:translateX(-25px) rotateZ(0deg)}67.667%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}83.333%{content:'🏐';transform:translateX(25px) rotateZ(720deg)}100%{content:'🏐';transform:translateX(-25px) rotateZ(0deg)}}\n"]} \ No newline at end of file diff --git a/less/three-dots.less b/less/three-dots.less index 4ef1789..ac1179d 100644 --- a/less/three-dots.less +++ b/less/three-dots.less @@ -1,6 +1,6 @@ /** * - * three-dots.css v0.1.0 + * three-dots.css v0.1.1 * * https://nzbin.github.io/three-dots/ * diff --git a/package.json b/package.json index 9b18763..4fdd02c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "three-dots", - "version": "0.1.0", + "version": "0.1.1", "description": "CSS loading animation made by single element.", "main": "dist/three-dots.css", "homepage": "https://github.com/nzbin/three-dots#readme", diff --git a/sass/three-dots.scss b/sass/three-dots.scss index 133e65a..518e386 100644 --- a/sass/three-dots.scss +++ b/sass/three-dots.scss @@ -1,6 +1,6 @@ /** * - * three-dots.css v0.1.0 + * three-dots.css v0.1.1 * * https://nzbin.github.io/three-dots/ *