UNPKG

17.3 kBJavaScriptView Raw
1!function(r,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCSSLoaders={},r.React)}(this,(function(r,n){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;r.Cardfliping=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader9 {\r\n display: flex;\r\n width: 50px;\r\n height: 50px;\r\n background-color: black;\r\n border-radius: 2%;\r\n animation: loader9 1.4s ease-in-out infinite;\r\n}\r\n\r\n@keyframes loader9 {\r\n 0% {\r\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\r\n }\r\n\r\n 50% {\r\n transform: perspective(120px) rotateX(-180deg) rotateY(0deg);\r\n }\r\n\r\n 100% {\r\n transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div nine"},n.createElement("div",{className:"loader9"})))},r.Chaser=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader3 {\r\n box-sizing: border-box;\r\n}\r\n\r\n.loader3 {\r\n width: 80px;\r\n height: 80px;\r\n}\r\n\r\n.loader3 .loader-ring {\r\n display: inline-block;\r\n position: relative;\r\n width: 80px;\r\n height: 80px;\r\n}\r\n\r\n.loader3 .loader-ring div {\r\n display: block;\r\n position: absolute;\r\n width: 55px;\r\n height: 55px;\r\n border: 6px solid black;\r\n border-radius: 50%;\r\n border-color: black transparent transparent transparent;\r\n animation: spin 2s cubic-bezier(0.4, 0, 1, 1) infinite;\r\n}\r\n.loader3 .loader-ring div:nth-child(2) {\r\n animation-delay: -1s;\r\n}\r\n\r\n@keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div three"},n.createElement("div",{className:"loader3"},n.createElement("div",{className:"loader-ring"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null)))))},r.Dewdrops=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader10 {\r\n display: flex;\r\n width: 55px;\r\n height: 55px;\r\n position: relative;\r\n}\r\n.circle-1,\r\n.circle-2 {\r\n height: 100%;\r\n width: 100%;\r\n background-color: darkgray;\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n position: absolute;\r\n animation: loader10 2.2s ease-in-out infinite;\r\n}\r\n.circle-2 {\r\n animation-delay: -1.1s;\r\n}\r\n\r\n@keyframes loader10 {\r\n 0%,\r\n 100% {\r\n transform: scale(0);\r\n }\r\n 50% {\r\n transform: scale(0.9);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div ten"},n.createElement("div",{className:"loader10"},n.createElement("div",{className:"circle-1"}),n.createElement("div",{className:"circle-2"}))))},r.Easeinout=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader12 {\r\n display: flex;\r\n height: 40px;\r\n width: 40px;\r\n position: relative;\r\n animation: loader12-anim1 2s ease-in-out infinite;\r\n}\r\n\r\n.dot-1,\r\n.dot-2 {\r\n height: 50%;\r\n width: 50%;\r\n border-radius: 50%;\r\n position: absolute;\r\n background-color: black;\r\n top: 0;\r\n animation: loader12-anim2 2s linear infinite;\r\n}\r\n\r\n.dot-2 {\r\n top: auto;\r\n bottom: 0;\r\n animation-delay: -1s;\r\n}\r\n\r\n@keyframes loader12-anim1 {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes loader12-anim2 {\r\n 0%,\r\n 100% {\r\n transform: scale(0);\r\n }\r\n 50% {\r\n transform: scale(0.9);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div twelve"},n.createElement("div",{className:"loader12"},n.createElement("div",{className:"dot-1"}),n.createElement("div",{className:"dot-2"}))))},r.Elipsis=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loaders {\r\n display: flex;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n}\r\n\r\n.loader5,\r\n.loader5::before,\r\n.loader5::after {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n animation: loader5 1.5s ease-in-out infinite;\r\n}\r\n\r\n.loader5 {\r\n transform: translateZ(0);\r\n animation-delay: -0.16s;\r\n color: black;\r\n}\r\n\r\n.loader5::before,\r\n.loader5::after {\r\n position: absolute;\r\n top: 0;\r\n content: "";\r\n}\r\n\r\n.loader5::before {\r\n left: -36px;\r\n animation-delay: -0.32s;\r\n}\r\n.loader5::after {\r\n left: 36px;\r\n}\r\n\r\n@keyframes loader5 {\r\n 0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 40px 0 -20px;\r\n }\r\n 40% {\r\n box-shadow: 0 40px 0 0;\r\n }\r\n}\r\n')),n.createElement("div",{className:"loaders"},n.createElement("div",{className:"loader-div five"},n.createElement("div",{className:"loader5"}))))},r.Moon=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader1 {\r\n width: 60px;\r\n height: 60px;\r\n border-top: 4px solid black;\r\n border-radius: 100%;\r\n animation: spin 2s linear infinite;\r\n box-sizing: border-box;\r\n}\r\n\r\n@keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div one"},n.createElement("div",{className:"loader1"})))},r.Revolution=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loader7 {\r\n display: flex;\r\n width: 85px;\r\n position: relative;\r\n height: 85px;\r\n color: white;\r\n}\r\n\r\n.loader7 div {\r\n transform-origin: 45px 45px;\r\n animation: loader7 1.4s linear infinite;\r\n}\r\n\r\n.loader7 div::after {\r\n content: "";\r\n display: block;\r\n position: absolute;\r\n top: 3px;\r\n left: 29px;\r\n width: 16px;\r\n height: 16px;\r\n background-color: black;\r\n border-radius: 50%;\r\n}\r\n\r\n.loader7 div:nth-child(1) {\r\n transform: rotate(0deg);\r\n animation-delay: -1.1s;\r\n}\r\n\r\n.loader7 div:nth-child(2) {\r\n transform: rotate(30deg);\r\n animation-delay: -1s;\r\n}\r\n.loader7 div:nth-child(3) {\r\n transform: rotate(60deg);\r\n animation-delay: -0.9s;\r\n}\r\n\r\n.loader7 div:nth-child(4) {\r\n transform: rotate(90deg);\r\n animation-delay: -0.8s;\r\n}\r\n.loader7 div:nth-child(5) {\r\n transform: rotate(120deg);\r\n animation-delay: -0.7s;\r\n}\r\n\r\n.loader7 div:nth-child(6) {\r\n transform: rotate(150deg);\r\n animation-delay: -0.6s;\r\n}\r\n\r\n.loader7 div:nth-child(7) {\r\n transform: rotate(180deg);\r\n animation-delay: -0.5s;\r\n}\r\n\r\n.loader7 div:nth-child(8) {\r\n transform: rotate(210deg);\r\n animation-delay: -0.4s;\r\n}\r\n\r\n.loader7 div:nth-child(9) {\r\n transform: rotate(240deg);\r\n animation-delay: -0.3s;\r\n}\r\n\r\n.loader7 div:nth-child(10) {\r\n transform: rotate(270deg);\r\n animation-delay: -0.2s;\r\n}\r\n.loader7 div:nth-child(11) {\r\n transform: rotate(300deg);\r\n animation-delay: -0.1s;\r\n}\r\n.loader7 div:nth-child(12) {\r\n transform: rotate(330deg);\r\n}\r\n\r\n@keyframes loader7 {\r\n 0% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n')),n.createElement("div",{className:"loader-div seven"},n.createElement("div",{className:"loader7"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))))},r.Revolver=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat(".loader2 {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\r\n.loader2 .loader-ring {\r\n display: inline-block;\r\n position: relative;\r\n width: 95px;\r\n height: 95px;\r\n}\r\n\r\n.loader2 .loader-ring div {\r\n display: block;\r\n position: absolute;\r\n width: 60px;\r\n height: 60px;\r\n border: 6px solid black;\r\n border-radius: 50%;\r\n border-color: black transparent transparent transparent;\r\n animation: spin 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n}\r\n\r\n@keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n")),n.createElement("div",{className:"loader-div two"},n.createElement("div",{className:"loader2"},n.createElement("div",{className:"loader-ring"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null)))))},r.Rhythm=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loaders {\r\n margin: 20px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n box-sizing: border-box;\r\n justify-content: space-between;\r\n}\r\n\r\n.loader-div.four {\r\n background-color: pink;\r\n}\r\n\r\n.loader4,\r\n.loader4::before,\r\n.loader4::after {\r\n background-color: black;\r\n width: 10px;\r\n height: 30px;\r\n position: relative;\r\n animation: loader4 1.8s ease-in-out infinite;\r\n}\r\n\r\n.loader4 {\r\n animation-delay: -0.16s;\r\n transform: translateZ(0);\r\n color: black;\r\n}\r\n\r\n.loader4::before,\r\n.loader4::after {\r\n position: absolute;\r\n content: "";\r\n top: 0;\r\n}\r\n\r\n.loader4::before {\r\n left: -14px;\r\n animation-delay: -0.32s;\r\n}\r\n.loader4::after {\r\n left: 14px;\r\n}\r\n\r\n@keyframes loader4 {\r\n 0%,\r\n 80%,\r\n 100% {\r\n height: 35px;\r\n box-shadow: 0 0;\r\n }\r\n\r\n 40% {\r\n height: 55px;\r\n box-shadow: 0 -10px;\r\n }\r\n}\r\n')),n.createElement("div",{className:"loaders"},n.createElement("div",{className:"loader-div four"},n.createElement("div",{className:"loader4"}))))},r.Spinner=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loader11 {\r\n width: 60px;\r\n display: flex;\r\n height: 60px;\r\n}\r\n.loader11::after {\r\n display: block;\r\n border-radius: 50%;\r\n content: "";\r\n width: 0;\r\n height: 0;\r\n margin: 0;\r\n border: 30px solid black;\r\n border-color: black transparent black transparent;\r\n animation: loader11 4.2s cubic-bezier(1, 1.01, 0, 0.02) infinite;\r\n}\r\n\r\n@keyframes loader11 {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 50% {\r\n transform: rotate(900deg);\r\n }\r\n 100% {\r\n transform: rotate(1800deg);\r\n }\r\n}\r\n')),n.createElement("div",{className:"loader-div eleven"},n.createElement("div",{className:"loader11"})))},r.Square=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loader8 {\r\n display: flex;\r\n width: 85px;\r\n position: relative;\r\n height: 85px;\r\n color: white;\r\n}\r\n\r\n.loader8 div {\r\n transform-origin: 45px 45px;\r\n animation: loader8 0.9s linear infinite;\r\n position: absolute;\r\n top: 0px;\r\n}\r\n\r\n.loader8 div::after {\r\n content: "";\r\n display: block;\r\n position: absolute;\r\n top: 3px;\r\n left: 29px;\r\n width: 16px;\r\n height: 16px;\r\n background-color: #ffffff;\r\n border-radius: 2%;\r\n border: 4px solid black;\r\n}\r\n\r\n.loader8 div:nth-child(1) {\r\n animation-delay: -0.8s;\r\n left: -30px;\r\n}\r\n\r\n.loader8 div:nth-child(2) {\r\n animation-delay: -0.7s;\r\n left: 0px;\r\n}\r\n.loader8 div:nth-child(3) {\r\n animation-delay: -0.6s;\r\n left: 30px;\r\n}\r\n\r\n.loader8 div:nth-child(4) {\r\n animation-delay: -0.5s;\r\n top: 30px;\r\n left: 30px;\r\n}\r\n.loader8 div:nth-child(5) {\r\n animation-delay: -0.4s;\r\n top: 60px;\r\n left: 30px;\r\n}\r\n\r\n.loader8 div:nth-child(6) {\r\n animation-delay: -0.3s;\r\n top: 60px;\r\n left: 0px;\r\n}\r\n\r\n.loader8 div:nth-child(7) {\r\n animation-delay: -0.2s;\r\n top: 60px;\r\n left: -30px;\r\n}\r\n\r\n.loader8 div:nth-child(8) {\r\n animation-delay: -0.1s;\r\n left: -30px;\r\n top: 30px;\r\n}\r\n\r\n@keyframes loader8 {\r\n 0% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n')),n.createElement("div",{className:"loader-div eight"},n.createElement("div",{className:"loader8"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))))},r.Throbber=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loader6 {\r\n display: flex;\r\n width: 64px;\r\n position: relative;\r\n height: 64px;\r\n}\r\n\r\n.loader6 div {\r\n transform-origin: 32px 32px;\r\n animation: loader6 1.4s linear infinite;\r\n}\r\n\r\n.loader6 div::after {\r\n content: "";\r\n display: block;\r\n position: absolute;\r\n top: 3px;\r\n left: 29px;\r\n width: 5px;\r\n height: 14px;\r\n background-color: black;\r\n border-radius: 18%;\r\n}\r\n\r\n.loader6 div:nth-child(1) {\r\n transform: rotate(0deg);\r\n animation-delay: -1.1s;\r\n}\r\n\r\n.loader6 div:nth-child(2) {\r\n transform: rotate(30deg);\r\n animation-delay: -1s;\r\n}\r\n.loader6 div:nth-child(3) {\r\n transform: rotate(60deg);\r\n animation-delay: -0.9s;\r\n}\r\n\r\n.loader6 div:nth-child(4) {\r\n transform: rotate(90deg);\r\n animation-delay: -0.8s;\r\n}\r\n.loader6 div:nth-child(5) {\r\n transform: rotate(120deg);\r\n animation-delay: -0.7s;\r\n}\r\n\r\n.loader6 div:nth-child(6) {\r\n transform: rotate(150deg);\r\n animation-delay: -0.6s;\r\n}\r\n\r\n.loader6 div:nth-child(7) {\r\n transform: rotate(180deg);\r\n animation-delay: -0.5s;\r\n}\r\n\r\n.loader6 div:nth-child(8) {\r\n transform: rotate(210deg);\r\n animation-delay: -0.4s;\r\n}\r\n\r\n.loader6 div:nth-child(9) {\r\n transform: rotate(240deg);\r\n animation-delay: -0.3s;\r\n}\r\n\r\n.loader6 div:nth-child(10) {\r\n transform: rotate(270deg);\r\n animation-delay: -0.2s;\r\n}\r\n.loader6 div:nth-child(11) {\r\n transform: rotate(300deg);\r\n animation-delay: -0.1s;\r\n}\r\n.loader6 div:nth-child(12) {\r\n transform: rotate(330deg);\r\n}\r\n\r\n@keyframes loader6 {\r\n 0% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n')),n.createElement("div",{className:"loader-div six"},n.createElement("div",{className:"loader6"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))))},r.Whirl=function(r){return n.createElement(n.Fragment,null,n.createElement("style",null,"".concat('.loader13 {\r\n display: flex;\r\n height: 60px;\r\n width: 60px;\r\n position: relative;\r\n}\r\n.loader13 div {\r\n transform-origin: 34px 34px;\r\n animation: loader13 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;\r\n}\r\n\r\n.loader13 div::after {\r\n content: "";\r\n display: block;\r\n position: absolute;\r\n width: 6px;\r\n height: 6px;\r\n background-color: black;\r\n border-radius: 50%;\r\n}\r\n\r\n.loader13 div:nth-child(1)::after {\r\n top: 50px;\r\n left: 50px;\r\n}\r\n\r\n.loader13 div:nth-child(2)::after {\r\n top: 54px;\r\n left: 45px;\r\n}\r\n\r\n.loader13 div:nth-child(3)::after {\r\n top: 57px;\r\n left: 39px;\r\n}\r\n.loader13 div:nth-child(4)::after {\r\n top: 58px;\r\n left: 32px;\r\n}\r\n\r\n.loader13 div:nth-child(5)::after {\r\n top: 57px;\r\n left: 25px;\r\n}\r\n\r\n.loader13 div:nth-child(6)::after {\r\n top: 54px;\r\n left: 19px;\r\n}\r\n\r\n.loader13 div:nth-child(7)::after {\r\n top: 50px;\r\n left: 14px;\r\n}\r\n\r\n.loader13 div:nth-child(8)::after {\r\n top: 45px;\r\n left: 10px;\r\n}\r\n\r\n@keyframes loader13 {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n')),n.createElement("div",{className:"loader-div thirteen"},n.createElement("div",{className:"loader13"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))))},Object.defineProperty(r,"__esModule",{value:!0})}));