styled-spinkit - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

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,o,i,a,s,c,l,f,u,d,p,m,v,b,y,g,x,z,k,w,P,j,E,O,h,X,Y,C,F,D,Z,q,A,B,H,W=n(require("react")),_=require("styled-components"),G=n(_),L=n(require("round-to")),M=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},R=function(n,t){return void 0===t&&(t=n),_.css(e||(e=M(["\n  width: ",";\n  height: ",";\n"],["\n  width: ",";\n  height: ",";\n"])),n,t)},T=function(n){return R(n+"px")},I=function(n){var e=n.size;return T(e)},J=function(n){var e=n.color;return _.css(t||(t=M(["\n  background-color: ",";\n"],["\n  background-color: ",";\n"])),e)},K=function(n){var e=n.size,t=void 0===e?0:e;return _.css(r||(r=M(["\n  margin: ","px auto;\n"],["\n  margin: ","px auto;\n"])),t)},N=function(n){return _.css(o||(o=M(["\n    animation-delay: ","s;\n  "],["\n    animation-delay: ","s;\n  "])),n)},Q=function(n){var e=n.delay;return N(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=_.keyframes(i||(i=U(["\n  100% {\n    transform: rotate(360deg);\n  }\n"],["\n  100% {\n    transform: rotate(360deg);\n  }\n"]))),$=_.keyframes(a||(a=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=G.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"])),R("60%"),$,2,function(n){return n.second&&_.css(s||(s=U(["\n      top: auto;\n      bottom: 0;\n      ",";\n    "],["\n      top: auto;\n      bottom: 0;\n      ",";\n    "])),N(-1))}),en=G.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"])),I,K,V,2,nn,J),tn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},rn=_.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"]))),on=G.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"])),R("100%"),function(n){return n.rotate},R("15%"),rn,function(n){return n.delay}),an=G.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"])),I,K,on,J),sn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},cn=_.keyframes(p||(p=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=G.div(m||(m=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=G.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},K,ln,function(n){return T(n.size/4)},J),un=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},dn=_.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"]))),pn=G.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"])),R("100%"),function(n){return n.transform},R("15%"),dn,function(n){return n.delay}),mn=G.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"])),K,I,pn,J),vn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},bn=_.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=G.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"])),R("50%"),function(n){return n.scale},R("100%"),bn,function(n){return n.duration},function(n){return n.delay}),gn=G.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"])),I,K,yn,J),xn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},zn=G.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"])),I,Q),kn=G.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 L(.8*n.size,1)},I,zn,J,function(n){return void 0===(e=L(.8*n.size,1))&&(e=42),_.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=_.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=G.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"])),R("33.33%"),Pn,function(n){return n.delay}),En=G.div(h||(h=wn(["\n  ",";\n  ",";\n  > "," {\n    ",";\n  }\n"],["\n  ",";\n  ",";\n  > "," {\n    ",";\n  }\n"])),I,K,jn,J),On=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},hn=_.keyframes(X||(X=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"]))),Xn=G.div(Y||(Y=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"])),I,J,K,hn),Yn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Cn=_.keyframes(C||(C=Yn(["\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"]))),Fn=G.div(F||(F=Yn(["\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"])),R("7px","100%"),Q),Dn=G.div(D||(D=Yn(["\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"])),K,function(n){return R(1.25*n.size+"px",n.size+"px")},Fn,J,Cn,function(n){return n.speed}),Zn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},qn=_.keyframes(Z||(Z=Zn(["\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"]))),An=G.div(q||(q=Zn(["\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"])),R("100%"),qn,function(n){return n.isDelay&&N(-1)}),Bn=G.div(A||(A=Zn(["\n  ",";\n  position: relative;\n  ",";\n  > "," {\n    ",";\n  }\n"],["\n  ",";\n  position: relative;\n  ",";\n  > "," {\n    ",";\n  }\n"])),I,K,An,J),Hn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},Wn=_.keyframes(B||(B=Hn(["\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"]))),_n=G.div(H||(H=Hn(["\n  ",";\n  ",";\n  ",";\n  animation: "," ","s infinite ease-in-out;\n"],["\n  ",";\n  ",";\n  ",";\n  animation: "," ","s infinite ease-in-out;\n"])),I,J,K,Wn,function(n){return n.speed});exports.ChasingDots=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r;return W.createElement(en,{size:t,color:o},W.createElement(nn,null),W.createElement(nn,{second:!0}))},exports.Circle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=S(12).map(function(n){var e=L(30*(n+1),1),t=L(1.2/12*n-1.2,1);return W.createElement(pn,{key:t,delay:t,transform:e})});return W.createElement(mn,{size:t,color:o},i)},exports.CubeGrid=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=[.5,.75,1,.25,.5,.75,0,.25,.5].map(function(n){return L(.4*n,2)}).map(function(n,e){return W.createElement(jn,{key:e,delay:n})});return W.createElement(En,{size:t,color:o},i)},exports.Pulse=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r;return W.createElement(Xn,{size:t,color:o})},exports.FadingCircle=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=S(12).map(function(n){return W.createElement(on,{key:n,rotate:L(30*n,1),delay:L(1.2-1.2/12*n,2)})});return W.createElement(an,{size:t,color:o},i)},exports.ThreeBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r;return W.createElement(fn,{size:t,color:o},W.createElement(ln,{delay:-.32}),W.createElement(ln,{delay:-.16}),W.createElement(ln,{delay:0}))},exports.FoldingCube=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=[0,1,3,2].map(function(n){return W.createElement(yn,{scale:90*n,key:n,delay:L(.3*n,2),duration:2.4})});return W.createElement(gn,{size:t,color:o},i)},exports.WanderingCubes=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=L(t/4,2);return W.createElement(kn,{speed:1.8,size:t,color:o},W.createElement(zn,{delay:1.8,size:i}),W.createElement(zn,{delay:.9,size:i}))},exports.WaveLoading=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r,i=S(5).map(function(n){return W.createElement(Fn,{delay:L(.1*n-1.2,1),key:n})});return W.createElement(Dn,{speed:1.2,size:t,color:o},i)},exports.DoubleBounce=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r;return W.createElement(Bn,{size:t,color:o},W.createElement(An,null),W.createElement(An,{isDelay:!0}))},exports.RotaingPlane=function(n){var e=n.size,t=void 0===e?40:e,r=n.color,o=void 0===r?"#333":r;return W.createElement(_n,{size:t,color:o,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,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})};
 //# sourceMappingURL=index.js.map

dist/styled-spinkit.esm.js

@@ -58,4 +58,4 @@ import React from 'react';
 var ChangeDots = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
-    return (React.createElement(StyledChangeDots, { size: size, color: color },
+    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(StyledChangeDots, { className: className, size: size, color: color },
         React.createElement(Child, null),
@@ -75,7 +75,7 @@ React.createElement(Child, { second: true })));
 var ForldingCircle = function (_a) {
-    var _b = _a.size, size$$1 = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var count = 12;
     var range = 1.2;
     var circles = getRange(count).map(function (v) { return (React.createElement(Child$1, { key: v, rotate: roundTo((360 / count) * v, 1), delay: roundTo(range - (range / count) * v, 2) })); });
-    return (React.createElement(StyledForldingCircle, { size: size$$1, color: color }, circles));
+    return (React.createElement(StyledForldingCircle, { className: className, size: size, color: color }, circles));
 };
@@ -93,4 +93,4 @@
 var ThreeBounce = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
-    return (React.createElement(StyledThreeBounce, { size: size, color: color },
+    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(StyledThreeBounce, { className: className, size: size, color: color },
         React.createElement(Child$2, { delay: -0.32 }),
@@ -111,3 +111,3 @@ React.createElement(Child$2, { delay: -0.16 }),
 var Circle = function (_a) {
-    var _b = _a.size, size$$1 = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var count = 12;
@@ -120,3 +120,3 @@ var speed = 1.2;
     });
-    return (React.createElement(StyledCircle, { size: size$$1, color: color }, circles));
+    return (React.createElement(StyledCircle, { className: className, size: size, color: color }, circles));
 };
@@ -134,3 +134,3 @@
 var FoldingCube = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var duration = 2.4;
@@ -140,3 +140,3 @@ var range = duration / 2;
     var cubes = [0, 1, 3, 2].map(function (v) { return (React.createElement(Child$4, { scale: 90 * v, key: v, delay: roundTo((range / cubeCount) * v, 2), duration: duration })); });
-    return (React.createElement(StyledFoldingCube, { size: size, color: color }, cubes));
+    return (React.createElement(StyledFoldingCube, { className: className, size: size, color: color }, cubes));
 };
@@ -157,6 +157,6 @@
 var WanderingCubes = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var speed = 1.8;
     var cubeSize = roundTo(size / 4, 2);
-    return (React.createElement(StyledWanderingCubes, { speed: speed, size: size, color: color },
+    return (React.createElement(StyledWanderingCubes, { speed: speed, className: className, size: size, color: color },
         React.createElement(Child$5, { delay: speed, size: cubeSize }),
@@ -176,3 +176,3 @@ React.createElement(Child$5, { delay: speed / 2, size: cubeSize })));
 var CubeGrid = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var range = 0.4;
@@ -182,3 +182,3 @@ var cubes = [0.5, 0.75, 1, 0.25, 0.5, 0.75, 0, 0.25, 0.5]
         .map(function (v, k) { return React.createElement(Child$6, { key: k, delay: v }); });
-    return (React.createElement(StyledCubeGrid, { size: size, color: color }, cubes));
+    return (React.createElement(StyledCubeGrid, { className: className, size: size, color: color }, cubes));
 };
@@ -195,4 +195,4 @@
 var Pulse = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
-    return React.createElement(StyledPulse, { size: size, color: color });
+    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(StyledPulse, { className: className, size: size, color: color });
 };
@@ -213,5 +213,5 @@
 var Wave = function (_a) {
-    var _b = _a.size, size$$1 = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
+    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c, className = _a.className;
     var rects = getRange(rectCount).map(function (v) { return (React.createElement(Rect, { delay: roundTo(-speed + (delayRange / (rectCount - 1)) * v, 1), key: v })); });
-    return (React.createElement(StyledWave, { speed: speed, size: size$$1, color: color }, rects));
+    return (React.createElement(StyledWave, { speed: speed, className: className, size: size, color: color }, rects));
 };
@@ -229,4 +229,4 @@
 var DoubleBounce = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
-    return (React.createElement(StyledDoubleBounce, { size: size, color: color },
+    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(StyledDoubleBounce, { className: className, size: size, color: color },
         React.createElement(Child$7, null),
@@ -246,4 +246,4 @@ React.createElement(Child$7, { isDelay: true })));
 var RotaingPlain = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? DEFAULT_COLOR : _c;
-    return React.createElement(StyledRotaingPlain, { size: size, color: color, speed: speed$1 });
+    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 });
 };
@@ -250,0 +250,0 @@

dist/types.d.ts

@@ -10,4 +10,5 @@ export interface SpinkitProps {
     color?: string;
+    className?: string;
 }
 export declare const DEFAULT_SIZE = 40;
 export declare const DEFAULT_COLOR = "#333";

package.json

 {
   "name": "styled-spinkit",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Spinner Loading components",
@@ -50,21 +50,21 @@ "license": "MIT",
     "@akameco/tsconfig": "^0.1.1",
-    "@types/jest": "^24.0.0",
-    "@types/react": "16.8.2",
-    "@types/react-test-renderer": "^16.8.0",
+    "@types/jest": "^24.0.6",
+    "@types/react": "16.8.4",
+    "@types/react-test-renderer": "^16.8.1",
     "@types/round-to": "^3.0.0",
-    "@types/styled-components": "^4.1.8",
-    "all-contributors-cli": "5.11.0",
-    "eslint": "5.13.0",
-    "eslint-config-precure": "4.3.3",
+    "@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",
     "jest-styled-components": "6.3.1",
-    "lint-staged": "8.1.3",
+    "lint-staged": "8.1.4",
     "prettier": "1.16.4",
-    "react": "16.8.0",
-    "react-dom": "16.8.0",
-    "react-test-renderer": "16.8.0",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
+    "react-test-renderer": "16.8.3",
     "rimraf": "2.6.3",
-    "rollup": "1.1.2",
-    "rollup-plugin-node-resolve": "4.0.0",
+    "rollup": "1.2.2",
+    "rollup-plugin-node-resolve": "4.0.1",
     "rollup-plugin-terser": "^4.0.4",
@@ -77,4 +77,4 @@ "storyshots": "3.2.2",
     "stylelint-processor-styled-components": "1.5.2",
-    "ts-jest": "^23.10.5",
-    "typescript": "^3.3.1"
+    "ts-jest": "^24.0.0",
+    "typescript": "^3.3.3333"
   },
@@ -81,0 +81,0 @@ "peerDependencies": {

readme.md

@@ -57,6 +57,4 @@ # styled-spinkit
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
 <!-- prettier-ignore -->
-| [<img src="https://avatars2.githubusercontent.com/u/4002137?v=4" width="100px;"/><br /><sub><b>akameco</b></sub>](http://akameco.github.io)<br />[💻](https://github.com/akameco/styled-spinkit/commits?author=akameco "Code") [📖](https://github.com/akameco/styled-spinkit/commits?author=akameco "Documentation") [⚠️](https://github.com/akameco/styled-spinkit/commits?author=akameco "Tests") [🚇](#infra-akameco "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars1.githubusercontent.com/u/19670625?v=4" width="100px;"/><br /><sub><b>jrusx</b></sub>](https://github.com/jrusx)<br />[💻](https://github.com/akameco/styled-spinkit/commits?author=jrusx "Code") [🐛](https://github.com/akameco/styled-spinkit/issues?q=author%3Ajrusx "Bug reports") |
-| :---: | :---: |
+<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>
 
@@ -63,0 +61,0 @@ <!-- ALL-CONTRIBUTORS-LIST:END -->

No alert changes

Improved metrics

Total package byte prevSize

149455

increased by2.03%

Lines of code

457

increased by0.44%

Worsened metrics

Number of lines in readme file

67

decreased by-2.9%

No dependency changes