Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

styled-spinkit

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-spinkit - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

dist/util/index.test.d.ts

2

dist/index.js

@@ -1,2 +0,2 @@

"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,a,o,i,s,c,l,f,u,d,m,p,v,b,y,g,x,z,k,w,P,j,E,O,h,N,X,Y,C,F,D,Z,q,A,B,H=n(require("react")),W=require("styled-components"),_=n(W),G=n(require("round-to")),L=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},M=function(n,t){return void 0===t&&(t=n),W.css(e||(e=L(["\n width: ",";\n height: ",";\n"],["\n width: ",";\n height: ",";\n"])),n,t)},R=function(n){return M(n+"px")},T=function(n){var e=n.size;return R(e)},I=function(n){var e=n.color;return W.css(t||(t=L(["\n background-color: ",";\n"],["\n background-color: ",";\n"])),e)},J=function(n){var e=n.size,t=void 0===e?0:e;return W.css(r||(r=L(["\n margin: ","px auto;\n"],["\n margin: ","px auto;\n"])),t)},K=function(n){return W.css(a||(a=L(["\n animation-delay: ","s;\n "],["\n animation-delay: ","s;\n "])),n)},Q=function(n){var e=n.delay;return K(e)},S=function(n){return Array.from(new Array(n).keys())},U=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},V=W.keyframes(o||(o=U(["\n 100% {\n transform: rotate(360deg);\n }\n"],["\n 100% {\n transform: rotate(360deg);\n }\n"]))),$=W.keyframes(i||(i=U(["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"],["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"]))),nn=_.div(c||(c=U(["\n ",";\n display: inline-block;\n position: absolute;\n top: 0;\n border-radius: 100%;\n animation: "," ","s infinite ease-in-out;\n ",";\n"],["\n ",";\n display: inline-block;\n position: absolute;\n top: 0;\n border-radius: 100%;\n animation: "," ","s infinite ease-in-out;\n ",";\n"])),M("60%"),$,2,function(n){return n.second&&W.css(s||(s=U(["\n top: auto;\n bottom: 0;\n ",";\n "],["\n top: auto;\n bottom: 0;\n ",";\n "])),K(-1))}),en=_.div(l||(l=U(["\n ",";\n ",";\n position: relative;\n text-align: center;\n animation: "," ","s infinite linear;\n\n > "," {\n ",";\n }\n"],["\n ",";\n ",";\n position: relative;\n text-align: center;\n animation: "," ","s infinite linear;\n\n > "," {\n ",";\n }\n"])),T,J,V,2,nn,I),tn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},rn=W.keyframes(f||(f=tn(["\n 0%,\n 39%,\n 100% {\n opacity: 0;\n }\n\n 40% {\n opacity: 1;\n }\n"],["\n 0%,\n 39%,\n 100% {\n opacity: 0;\n }\n\n 40% {\n opacity: 1;\n }\n"]))),an=_.div(u||(u=tn(["\n ",";\n position: absolute;\n left: 0;\n top: 0;\n transform: rotate(","deg);\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s infinite ease-in-out both -","s;\n }\n"],["\n ",";\n position: absolute;\n left: 0;\n top: 0;\n transform: rotate(","deg);\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s infinite ease-in-out both -","s;\n }\n"])),M("100%"),function(n){return n.rotate},M("15%"),rn,function(n){return n.delay}),on=_.div(d||(d=tn(["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),T,J,an,I),sn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},cn=W.keyframes(m||(m=sn(["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"],["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"]))),ln=_.div(p||(p=sn(["\n border-radius: 100%;\n display: inline-block;\n animation: "," 1.4s ease-in-out ","s infinite both;\n"],["\n border-radius: 100%;\n display: inline-block;\n animation: "," 1.4s ease-in-out ","s infinite both;\n"])),cn,function(n){return n.delay}),fn=_.div(v||(v=sn(["\n width: ","px;\n ",";\n text-align: center;\n border-radius: 100%;\n > "," {\n ",";\n ",";\n }\n"],["\n width: ","px;\n ",";\n text-align: center;\n border-radius: 100%;\n > "," {\n ",";\n ",";\n }\n"])),function(n){return n.size},J,ln,function(n){return R(n.size/4)},I),un=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},dn=W.keyframes(b||(b=un(["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"],["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"]))),mn=_.div(y||(y=un(["\n ",";\n position: absolute;\n top: 0;\n left: 0;\n transform: rotate(","deg);\n\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s ease-in-out ","s infinite both;\n }\n"],["\n ",";\n position: absolute;\n top: 0;\n left: 0;\n transform: rotate(","deg);\n\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s ease-in-out ","s infinite both;\n }\n"])),M("100%"),function(n){return n.transform},M("15%"),dn,function(n){return n.delay}),pn=_.div(g||(g=un(["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),J,T,mn,I),vn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},bn=W.keyframes(x||(x=vn(["\n 0%,\n 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%,\n 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%,\n 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n"],["\n 0%,\n 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%,\n 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%,\n 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n"]))),yn=_.div(z||(z=vn(["\n float: left;\n ",";\n position: relative;\n transform: scale(1.1) rotateZ(","deg);\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n ",";\n animation: "," ","s infinite linear both\n ","s;\n transform-origin: 100% 100%;\n }\n"],["\n float: left;\n ",";\n position: relative;\n transform: scale(1.1) rotateZ(","deg);\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n ",";\n animation: "," ","s infinite linear both\n ","s;\n transform-origin: 100% 100%;\n }\n"])),M("50%"),function(n){return n.scale},M("100%"),bn,function(n){return n.duration},function(n){return n.delay}),gn=_.div(k||(k=vn(["\n ",";\n ",";\n position: relative;\n transform: rotateZ(45deg);\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n transform: rotateZ(45deg);\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),T,J,yn,I),xn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},zn=_.div(P||(P=xn(["\n ",";\n ",";\n position: absolute;\n top: 0;\n left: 0;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n"],["\n ",";\n ",";\n position: absolute;\n top: 0;\n left: 0;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n"])),T,Q),kn=_.div(j||(j=xn(["\n margin: ","px auto;\n ",";\n text-align: center;\n font-size: 10px;\n position: relative;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n }\n"],["\n margin: ","px auto;\n ",";\n text-align: center;\n font-size: 10px;\n position: relative;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n }\n"])),function(n){return G(.8*n.size,1)},T,zn,I,function(n){return void 0===(e=G(.8*n.size,1))&&(e=42),W.keyframes(w||(w=xn(["\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: translateX(","px) rotate(-90deg) scale(0.5);\n }\n 50% {\n /* Hack to make FF rotate in the right direction */\n transform: translateX(","px) translateY(","px) rotate(-179deg);\n }\n 50.1% {\n transform: translateX(","px) translateY(","px) rotate(-180deg);\n }\n 75% {\n transform: translateX(0) translateY(","px) rotate(-270deg) scale(0.5);\n }\n 100% {\n transform: rotate(-360deg);\n }\n"],["\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: translateX(","px) rotate(-90deg) scale(0.5);\n }\n 50% {\n /* Hack to make FF rotate in the right direction */\n transform: translateX(","px) translateY(","px) rotate(-179deg);\n }\n 50.1% {\n transform: translateX(","px) translateY(","px) rotate(-180deg);\n }\n 75% {\n transform: translateX(0) translateY(","px) rotate(-270deg) scale(0.5);\n }\n 100% {\n transform: rotate(-360deg);\n }\n"])),e,e,e,e,e,e);var e},function(n){return n.speed}),wn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Pn=W.keyframes(E||(E=wn(["\n 0%,\n 70%,\n 100% {\n transform: scale3d(1, 1, 1);\n }\n\n 35% {\n transform: scale3d(0, 0, 1);\n }\n"],["\n 0%,\n 70%,\n 100% {\n transform: scale3d(1, 1, 1);\n }\n\n 35% {\n transform: scale3d(0, 0, 1);\n }\n"]))),jn=_.div(O||(O=wn(["\n ",";\n float: left;\n animation: "," 1.3s infinite ease-in-out ","s;\n"],["\n ",";\n float: left;\n animation: "," 1.3s infinite ease-in-out ","s;\n"])),M("33.33%"),Pn,function(n){return n.delay}),En=_.div(h||(h=wn(["\n ",";\n ",";\n > "," {\n ",";\n }\n"],["\n ",";\n ",";\n > "," {\n ",";\n }\n"])),T,J,jn,I),On=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},hn=W.keyframes(N||(N=On(["\n 0% {\n transform: scale(0);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n"],["\n 0% {\n transform: scale(0);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n"]))),Nn=_.div(X||(X=On(["\n ",";\n ",";\n ",";\n border-radius: 100%;\n animation: "," 1s ease-in-out infinite;\n"],["\n ",";\n ",";\n ",";\n border-radius: 100%;\n animation: "," 1s ease-in-out infinite;\n"])),T,I,J,hn),Xn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Yn=W.keyframes(Y||(Y=Xn(["\n 0%,\n 40%,\n 100% {\n transform: scaleY(0.4);\n }\n 20% {\n transform: scaleY(1);\n }\n"],["\n 0%,\n 40%,\n 100% {\n transform: scaleY(0.4);\n }\n 20% {\n transform: scaleY(1);\n }\n"]))),Cn=_.div(C||(C=Xn(["\n ",";\n margin: 0 3px 0 0;\n display: inline-block;\n ",";\n"],["\n ",";\n margin: 0 3px 0 0;\n display: inline-block;\n ",";\n"])),M("7px","100%"),Q),Fn=_.div(F||(F=Xn(["\n ",";\n ",";\n text-align: center;\n font-size: 10px;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n }\n"],["\n ",";\n ",";\n text-align: center;\n font-size: 10px;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n }\n"])),J,function(n){return M(1.25*n.size+"px",n.size+"px")},Cn,I,Yn,function(n){return n.speed}),Dn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Zn=W.keyframes(D||(D=Dn(["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"],["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"]))),qn=_.div(Z||(Z=Dn(["\n ",";\n border-radius: 50%;\n position: absolute;\n opacity: 0.6;\n top: 0;\n left: 0;\n animation: "," 2s infinite ease-in-out;\n ",";\n"],["\n ",";\n border-radius: 50%;\n position: absolute;\n opacity: 0.6;\n top: 0;\n left: 0;\n animation: "," 2s infinite ease-in-out;\n ",";\n"])),M("100%"),Zn,function(n){return n.isDelay&&K(-1)}),An=_.div(q||(q=Dn(["\n ",";\n position: relative;\n ",";\n > "," {\n ",";\n }\n"],["\n ",";\n position: relative;\n ",";\n > "," {\n ",";\n }\n"])),T,J,qn,I),Bn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Hn=W.keyframes(A||(A=Bn(["\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n }\n 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n"],["\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n }\n 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n"]))),Wn=_.div(B||(B=Bn(["\n ",";\n ",";\n ",";\n animation: "," ","s infinite ease-in-out;\n"],["\n ",";\n ",";\n ",";\n animation: "," ","s infinite ease-in-out;\n"])),T,I,J,Hn,function(n){return n.speed});exports.ChasingDots=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return H.createElement(en,{className:o,size:t,color:a},H.createElement(nn,null),H.createElement(nn,{second:!0}))},exports.Circle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(12).map(function(n){var e=G(30*(n+1),1),t=G(1.2/12*n-1.2,1);return H.createElement(mn,{key:t,delay:t,transform:e})});return H.createElement(pn,{className:o,size:t,color:a},i)},exports.CubeGrid=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=[.5,.75,1,.25,.5,.75,0,.25,.5].map(function(n){return G(.4*n,2)}).map(function(n,e){return H.createElement(jn,{key:e,delay:n})});return H.createElement(En,{className:o,size:t,color:a},i)},exports.Pulse=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return H.createElement(Nn,{className:o,size:t,color:a})},exports.FadingCircle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(12).map(function(n){return H.createElement(an,{key:n,rotate:G(30*n,1),delay:G(1.2-1.2/12*n,2)})});return H.createElement(on,{className:o,size:t,color:a},i)},exports.ThreeBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return H.createElement(fn,{className:o,size:t,color:a},H.createElement(ln,{delay:-.32}),H.createElement(ln,{delay:-.16}),H.createElement(ln,{delay:0}))},exports.FoldingCube=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=[0,1,3,2].map(function(n){return H.createElement(yn,{scale:90*n,key:n,delay:G(.3*n,2),duration:2.4})});return H.createElement(gn,{className:o,size:t,color:a},i)},exports.WanderingCubes=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=G(t/4,2);return H.createElement(kn,{speed:1.8,className:o,size:t,color:a},H.createElement(zn,{delay:1.8,size:i}),H.createElement(zn,{delay:.9,size:i}))},exports.WaveLoading=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(5).map(function(n){return H.createElement(Cn,{delay:G(.1*n-1.2,1),key:n})});return H.createElement(Fn,{speed:1.2,className:o,size:t,color:a},i)},exports.DoubleBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return H.createElement(An,{className:o,size:t,color:a},H.createElement(qn,null),H.createElement(qn,{isDelay:!0}))},exports.RotaingPlane=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return H.createElement(Wn,{className:o,size:t,color:a,speed:1.2})};
"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,a,o,i,s,c,l,f,u,d,m,p,v,b,y,g,x,z,k,w,h,P,j,E,O,N,X,Y,C,F,D,M,Z,q,A,B=n(require("react")),H=require("styled-components"),W=n(H),_=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},G=function(n,e){return Math.round(n*Math.pow(10,e))/Math.pow(10,e)},L=function(n,t){return void 0===t&&(t=n),H.css(e||(e=_(["\n width: ",";\n height: ",";\n"],["\n width: ",";\n height: ",";\n"])),n,t)},R=function(n){return L(n+"px")},T=function(n){var e=n.size;return R(e)},I=function(n){var e=n.color;return H.css(t||(t=_(["\n background-color: ",";\n"],["\n background-color: ",";\n"])),e)},J=function(n){var e=n.size,t=void 0===e?0:e;return H.css(r||(r=_(["\n margin: ","px auto;\n"],["\n margin: ","px auto;\n"])),t)},K=function(n){return H.css(a||(a=_(["\n animation-delay: ","s;\n "],["\n animation-delay: ","s;\n "])),n)},Q=function(n){var e=n.delay;return K(e)},S=function(n){return Array.from(new Array(n).keys())},U=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},V=H.keyframes(o||(o=U(["\n 100% {\n transform: rotate(360deg);\n }\n"],["\n 100% {\n transform: rotate(360deg);\n }\n"]))),$=H.keyframes(i||(i=U(["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"],["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"]))),nn=W.div(c||(c=U(["\n ",";\n display: inline-block;\n position: absolute;\n top: 0;\n border-radius: 100%;\n animation: "," ","s infinite ease-in-out;\n ",";\n"],["\n ",";\n display: inline-block;\n position: absolute;\n top: 0;\n border-radius: 100%;\n animation: "," ","s infinite ease-in-out;\n ",";\n"])),L("60%"),$,2,function(n){return n.second&&H.css(s||(s=U(["\n top: auto;\n bottom: 0;\n ",";\n "],["\n top: auto;\n bottom: 0;\n ",";\n "])),K(-1))}),en=W.div(l||(l=U(["\n ",";\n ",";\n position: relative;\n text-align: center;\n animation: "," ","s infinite linear;\n\n > "," {\n ",";\n }\n"],["\n ",";\n ",";\n position: relative;\n text-align: center;\n animation: "," ","s infinite linear;\n\n > "," {\n ",";\n }\n"])),T,J,V,2,nn,I),tn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},rn=H.keyframes(f||(f=tn(["\n 0%,\n 39%,\n 100% {\n opacity: 0;\n }\n\n 40% {\n opacity: 1;\n }\n"],["\n 0%,\n 39%,\n 100% {\n opacity: 0;\n }\n\n 40% {\n opacity: 1;\n }\n"]))),an=W.div(u||(u=tn(["\n ",";\n position: absolute;\n left: 0;\n top: 0;\n transform: rotate(","deg);\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s infinite ease-in-out both -","s;\n }\n"],["\n ",";\n position: absolute;\n left: 0;\n top: 0;\n transform: rotate(","deg);\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s infinite ease-in-out both -","s;\n }\n"])),L("100%"),function(n){return n.rotate},L("15%"),rn,function(n){return n.delay}),on=W.div(d||(d=tn(["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),T,J,an,I),sn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},cn=H.keyframes(m||(m=sn(["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"],["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"]))),ln=W.div(p||(p=sn(["\n border-radius: 100%;\n display: inline-block;\n animation: "," 1.4s ease-in-out ","s infinite both;\n"],["\n border-radius: 100%;\n display: inline-block;\n animation: "," 1.4s ease-in-out ","s infinite both;\n"])),cn,function(n){return n.delay}),fn=W.div(v||(v=sn(["\n width: ","px;\n ",";\n text-align: center;\n border-radius: 100%;\n > "," {\n ",";\n ",";\n }\n"],["\n width: ","px;\n ",";\n text-align: center;\n border-radius: 100%;\n > "," {\n ",";\n ",";\n }\n"])),function(n){return n.size},J,ln,function(n){return R(n.size/4)},I),un=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},dn=H.keyframes(b||(b=un(["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"],["\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n"]))),mn=W.div(y||(y=un(["\n ",";\n position: absolute;\n top: 0;\n left: 0;\n transform: rotate(","deg);\n\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s ease-in-out ","s infinite both;\n }\n"],["\n ",";\n position: absolute;\n top: 0;\n left: 0;\n transform: rotate(","deg);\n\n &::before {\n content: '';\n display: block;\n margin: 0 auto;\n ",";\n border-radius: 100%;\n animation: "," 1.2s ease-in-out ","s infinite both;\n }\n"])),L("100%"),function(n){return n.transform},L("15%"),dn,function(n){return n.delay}),pn=W.div(g||(g=un(["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),J,T,mn,I),vn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},bn=H.keyframes(x||(x=vn(["\n 0%,\n 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%,\n 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%,\n 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n"],["\n 0%,\n 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%,\n 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%,\n 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n"]))),yn=W.div(z||(z=vn(["\n float: left;\n ",";\n position: relative;\n transform: scale(1.1) rotateZ(","deg);\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n ",";\n animation: "," ","s infinite linear both\n ","s;\n transform-origin: 100% 100%;\n }\n"],["\n float: left;\n ",";\n position: relative;\n transform: scale(1.1) rotateZ(","deg);\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n ",";\n animation: "," ","s infinite linear both\n ","s;\n transform-origin: 100% 100%;\n }\n"])),L("50%"),function(n){return n.scale},L("100%"),bn,function(n){return n.duration},function(n){return n.delay}),gn=W.div(k||(k=vn(["\n ",";\n ",";\n position: relative;\n transform: rotateZ(45deg);\n\n > "," {\n &::before {\n ",";\n }\n }\n"],["\n ",";\n ",";\n position: relative;\n transform: rotateZ(45deg);\n\n > "," {\n &::before {\n ",";\n }\n }\n"])),T,J,yn,I),xn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},zn=W.div(h||(h=xn(["\n ",";\n ",";\n position: absolute;\n top: 0;\n left: 0;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n"],["\n ",";\n ",";\n position: absolute;\n top: 0;\n left: 0;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n"])),T,Q),kn=W.div(P||(P=xn(["\n margin: ","px auto;\n ",";\n text-align: center;\n font-size: 10px;\n position: relative;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n }\n"],["\n margin: ","px auto;\n ",";\n text-align: center;\n font-size: 10px;\n position: relative;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n }\n"])),function(n){return G(.8*n.size,1)},T,zn,I,function(n){return void 0===(e=G(.8*n.size,1))&&(e=42),H.keyframes(w||(w=xn(["\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: translateX(","px) rotate(-90deg) scale(0.5);\n }\n 50% {\n /* Hack to make FF rotate in the right direction */\n transform: translateX(","px) translateY(","px) rotate(-179deg);\n }\n 50.1% {\n transform: translateX(","px) translateY(","px) rotate(-180deg);\n }\n 75% {\n transform: translateX(0) translateY(","px) rotate(-270deg) scale(0.5);\n }\n 100% {\n transform: rotate(-360deg);\n }\n"],["\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: translateX(","px) rotate(-90deg) scale(0.5);\n }\n 50% {\n /* Hack to make FF rotate in the right direction */\n transform: translateX(","px) translateY(","px) rotate(-179deg);\n }\n 50.1% {\n transform: translateX(","px) translateY(","px) rotate(-180deg);\n }\n 75% {\n transform: translateX(0) translateY(","px) rotate(-270deg) scale(0.5);\n }\n 100% {\n transform: rotate(-360deg);\n }\n"])),e,e,e,e,e,e);var e},function(n){return n.speed}),wn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},hn=H.keyframes(j||(j=wn(["\n 0%,\n 70%,\n 100% {\n transform: scale3d(1, 1, 1);\n }\n\n 35% {\n transform: scale3d(0, 0, 1);\n }\n"],["\n 0%,\n 70%,\n 100% {\n transform: scale3d(1, 1, 1);\n }\n\n 35% {\n transform: scale3d(0, 0, 1);\n }\n"]))),Pn=W.div(E||(E=wn(["\n ",";\n float: left;\n animation: "," 1.3s infinite ease-in-out ","s;\n"],["\n ",";\n float: left;\n animation: "," 1.3s infinite ease-in-out ","s;\n"])),L("33.33%"),hn,function(n){return n.delay}),jn=W.div(O||(O=wn(["\n ",";\n ",";\n > "," {\n ",";\n }\n"],["\n ",";\n ",";\n > "," {\n ",";\n }\n"])),T,J,Pn,I),En=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},On=H.keyframes(N||(N=En(["\n 0% {\n transform: scale(0);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n"],["\n 0% {\n transform: scale(0);\n }\n 100% {\n opacity: 0;\n transform: scale(1);\n }\n"]))),Nn=W.div(X||(X=En(["\n ",";\n ",";\n ",";\n border-radius: 100%;\n animation: "," 1s ease-in-out infinite;\n"],["\n ",";\n ",";\n ",";\n border-radius: 100%;\n animation: "," 1s ease-in-out infinite;\n"])),T,I,J,On),Xn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Yn=H.keyframes(Y||(Y=Xn(["\n 0%,\n 40%,\n 100% {\n transform: scaleY(0.4);\n }\n 20% {\n transform: scaleY(1);\n }\n"],["\n 0%,\n 40%,\n 100% {\n transform: scaleY(0.4);\n }\n 20% {\n transform: scaleY(1);\n }\n"]))),Cn=W.div(C||(C=Xn(["\n ",";\n margin: 0 3px 0 0;\n display: inline-block;\n ",";\n"],["\n ",";\n margin: 0 3px 0 0;\n display: inline-block;\n ",";\n"])),L("7px","100%"),Q),Fn=W.div(F||(F=Xn(["\n ",";\n ",";\n text-align: center;\n font-size: 10px;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n }\n"],["\n ",";\n ",";\n text-align: center;\n font-size: 10px;\n\n > "," {\n ",";\n animation-name: ",";\n animation-duration: ","s;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n }\n"])),J,function(n){return L(1.25*n.size+"px",n.size+"px")},Cn,I,Yn,function(n){return n.speed}),Dn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Mn=H.keyframes(D||(D=Dn(["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"],["\n 0%,\n 100% {\n transform: scale(0);\n }\n 50% {\n transform: scale(1);\n }\n"]))),Zn=W.div(M||(M=Dn(["\n ",";\n border-radius: 50%;\n position: absolute;\n opacity: 0.6;\n top: 0;\n left: 0;\n animation: "," 2s infinite ease-in-out;\n ",";\n"],["\n ",";\n border-radius: 50%;\n position: absolute;\n opacity: 0.6;\n top: 0;\n left: 0;\n animation: "," 2s infinite ease-in-out;\n ",";\n"])),L("100%"),Mn,function(n){return n.isDelay&&K(-1)}),qn=W.div(Z||(Z=Dn(["\n ",";\n position: relative;\n ",";\n > "," {\n ",";\n }\n"],["\n ",";\n position: relative;\n ",";\n > "," {\n ",";\n }\n"])),T,J,Zn,I),An=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Bn=H.keyframes(q||(q=An(["\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n }\n 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n"],["\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n }\n 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n"]))),Hn=W.div(A||(A=An(["\n ",";\n ",";\n ",";\n animation: "," ","s infinite ease-in-out;\n"],["\n ",";\n ",";\n ",";\n animation: "," ","s infinite ease-in-out;\n"])),T,I,J,Bn,function(n){return n.speed});exports.ChasingDots=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return B.createElement(en,{className:o,size:t,color:a},B.createElement(nn,null),B.createElement(nn,{second:!0}))},exports.Circle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(12).map(function(n){var e=G(30*(n+1),1),t=G(1.2/12*n-1.2,1);return B.createElement(mn,{key:t,delay:t,transform:e})});return B.createElement(pn,{className:o,size:t,color:a},i)},exports.CubeGrid=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=[.5,.75,1,.25,.5,.75,0,.25,.5].map(function(n){return G(.4*n,2)}).map(function(n,e){return B.createElement(Pn,{key:e,delay:n})});return B.createElement(jn,{className:o,size:t,color:a},i)},exports.DoubleBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return B.createElement(qn,{className:o,size:t,color:a},B.createElement(Zn,null),B.createElement(Zn,{isDelay:!0}))},exports.FadingCircle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(12).map(function(n){return B.createElement(an,{key:n,rotate:G(30*n,1),delay:G(1.2-1.2/12*n,2)})});return B.createElement(on,{className:o,size:t,color:a},i)},exports.FoldingCube=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=[0,1,3,2].map(function(n){return B.createElement(yn,{scale:90*n,key:n,delay:G(.3*n,2),duration:2.4})});return B.createElement(gn,{className:o,size:t,color:a},i)},exports.Pulse=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return B.createElement(Nn,{className:o,size:t,color:a})},exports.RotaingPlane=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return B.createElement(Hn,{className:o,size:t,color:a,speed:1.2})},exports.ThreeBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className;return B.createElement(fn,{className:o,size:t,color:a},B.createElement(ln,{delay:-.32}),B.createElement(ln,{delay:-.16}),B.createElement(ln,{delay:0}))},exports.WanderingCubes=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=G(t/4,2);return B.createElement(kn,{speed:1.8,className:o,size:t,color:a},B.createElement(zn,{delay:1.8,size:i}),B.createElement(zn,{delay:.9,size:i}))},exports.WaveLoading=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,a=void 0===r?"#333":r,o=n.className,i=S(5).map(function(n){return B.createElement(Cn,{delay:G(.1*n-1.2,1),key:n})});return B.createElement(Fn,{speed:1.2,className:o,size:t,color:a},i)};
//# sourceMappingURL=index.js.map
import React from 'react';
import styled, { css, keyframes } from 'styled-components';
import roundTo from 'round-to';

@@ -12,2 +11,5 @@ var DEFAULT_SIZE = 40;

};
// This is an improvement of Math.round.
// It gives you the ability to round after a decimal.
var roundTo = function (n, precision) { return (Math.round((n * Math.pow(10, precision))) / Math.pow(10, precision)); };
var size = function (width, height) {

@@ -235,6 +237,6 @@ if (height === void 0) { height = width; }

var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
return React.createElement(StyledRotaingPlain, { className: className, size: size, color: color, speed: speed$1 });
return (React.createElement(StyledRotaingPlain, { className: className, size: size, color: color, speed: speed$1 }));
};
export { ChangeDots as ChasingDots, Circle, CubeGrid, Pulse, ForldingCircle as FadingCircle, ThreeBounce, FoldingCube, WanderingCubes, Wave as WaveLoading, DoubleBounce, RotaingPlain as RotaingPlane };
export { ChangeDots as ChasingDots, Circle, CubeGrid, DoubleBounce, ForldingCircle as FadingCircle, FoldingCube, Pulse, RotaingPlain as RotaingPlane, ThreeBounce, WanderingCubes, Wave as WaveLoading };
//# sourceMappingURL=styled-spinkit.esm.js.map

@@ -0,1 +1,2 @@

export declare const roundTo: (n: number, precision: number) => number;
export declare const size: (width: string, height?: string) => import("styled-components").FlattenSimpleInterpolation;

@@ -2,0 +3,0 @@ export declare const sizePx: (n: number) => import("styled-components").FlattenSimpleInterpolation;

{
"name": "styled-spinkit",
"version": "0.7.0",
"version": "0.7.1",
"description": "Spinner Loading components",

@@ -27,9 +27,11 @@ "license": "MIT",

"add-contributors": "all-contributors add",
"prebuild": "rimraf dist/*",
"build": "tsc && rollup -c",
"prebuild": "rimraf dist/*",
"postbuild": "rimraf compiled/*",
"fmt": "prettier --write '**/*.{ts,tsx,js,json,md}'",
"lint:css": "stylelint \"./src/**/*.js\" || true",
"lint:css": "stylelint './src/**/*.{ts,tsx}'",
"lint:js": "eslint --fix 'src/**/*.{ts,tsx}'",
"lint": "npm run lint:css && npm run lint:js",
"test": "jest",
"dev": "parcel example/index.html",
"prepublish": "npm run build"

@@ -46,35 +48,34 @@ },

],
"dependencies": {
"round-to": "^3.0.0"
},
"dependencies": {},
"devDependencies": {
"@akameco/tsconfig": "^0.1.1",
"@types/jest": "^24.0.6",
"@types/react": "16.8.4",
"@akameco/tsconfig": "^0.2.0",
"@types/jest": "^24.0.12",
"@types/react": "16.8.17",
"@types/react-test-renderer": "^16.8.1",
"@types/round-to": "^3.0.0",
"@types/styled-components": "^4.1.10",
"all-contributors-cli": "6.1.2",
"eslint": "5.14.1",
"eslint-config-precure": "4.8.0",
"husky": "1.3.1",
"jest": "24.1.0",
"@types/styled-components": "^4.1.14",
"all-contributors-cli": "6.4.0",
"eslint": "5.16.0",
"eslint-config-precure": "4.15.0",
"husky": "2.2.0",
"jest": "24.8.0",
"jest-styled-components": "6.3.1",
"lint-staged": "8.1.4",
"prettier": "1.16.4",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-test-renderer": "16.8.3",
"lint-staged": "8.1.6",
"parcel-bundler": "^1.12.3",
"prettier": "1.17.0",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-test-renderer": "16.8.6",
"rimraf": "2.6.3",
"rollup": "1.2.2",
"rollup-plugin-node-resolve": "4.0.1",
"rollup": "1.11.3",
"rollup-plugin-node-resolve": "4.2.3",
"rollup-plugin-terser": "^4.0.4",
"storyshots": "3.2.2",
"styled-components": "4.1.3",
"stylelint": "9.10.1",
"stylelint-config-standard": "18.2.0",
"styled-components": "4.2.0",
"stylelint": "10.0.1",
"stylelint-config-standard": "18.3.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.5.2",
"ts-jest": "^24.0.0",
"typescript": "^3.3.3333"
"stylelint-processor-styled-components": "1.6.0",
"ts-jest": "^24.0.2",
"typescript": "^3.4.5"
},

@@ -81,0 +82,0 @@ "peerDependencies": {

@@ -7,3 +7,3 @@ # styled-spinkit

[![MIT License](https://img.shields.io/npm/l/nps.svg?style=flat-square)](./license)
[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)

@@ -16,2 +16,4 @@ > Simple animation loading components with [styled-components](https://github.com/styled-components/styled-components)

See [Bit components collection](https://bit.dev/akameco/styled-spinkit)
Inspired by [SpinKit](https://github.com/tobiasahlin/SpinKit).

@@ -60,3 +62,3 @@

<!-- prettier-ignore -->
<table><tr><td align="center"><a href="http://akameco.github.io"><img src="https://avatars2.githubusercontent.com/u/4002137?v=4" width="100px;" alt="akameco"/><br /><sub><b>akameco</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Documentation">📖</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Tests">⚠️</a> <a href="#infra-akameco" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td><td align="center"><a href="https://github.com/jrusx"><img src="https://avatars1.githubusercontent.com/u/19670625?v=4" width="100px;" alt="jrusx"/><br /><sub><b>jrusx</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=jrusx" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/issues?q=author%3Ajrusx" title="Bug reports">🐛</a></td></tr></table>
<table><tr><td align="center"><a href="http://akameco.github.io"><img src="https://avatars2.githubusercontent.com/u/4002137?v=4" width="100px;" alt="akameco"/><br /><sub><b>akameco</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Documentation">📖</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Tests">⚠️</a> <a href="#infra-akameco" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td><td align="center"><a href="https://github.com/jrusx"><img src="https://avatars1.githubusercontent.com/u/19670625?v=4" width="100px;" alt="jrusx"/><br /><sub><b>jrusx</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=jrusx" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/issues?q=author%3Ajrusx" title="Bug reports">🐛</a></td><td align="center"><a href="http://stackoverflow.com/users/6174694/annihil"><img src="https://avatars3.githubusercontent.com/u/16704309?v=4" width="100px;" alt="Bap ☺"/><br /><sub><b>Bap ☺</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=Annihil" title="Code">💻</a></td></tr></table>

@@ -63,0 +65,0 @@ <!-- ALL-CONTRIBUTORS-LIST:END -->

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc