react-preloader-icon
Version:
SVG loading icons component for React.
3 lines (2 loc) • 16.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).PreloaderIcon={},e.React)}(this,(function(e,t){"use strict";var r="default"in t?t.default:t;function n(e){var t,r,n=e.duration,c=e.delay,i=void 0===c?0:c,l=e.update,a=function(e){(t||(t=e+i),e>t)&&(l&&l((e-t)%n/n));r=window.requestAnimationFrame(a)};return r=window.requestAnimationFrame(a),function(){return window.cancelAnimationFrame(r)}}var c=[[45,57,80,64,32,66,45,64,23,66,13,64,56,34,34,2,23,76,79,20],[55,33,5,75,23,73,33,12,14,60,80],[34,78,23,56,23,34,76,80,54,21,50],[45,13,80,56,72,45,76,34,23,67,30]];var i=function(e){var c=e.index,i=e.level,l=e.duration,a=function(e,r){var c=t.useRef();return t.useEffect((function(){var t=1/e.length;return n({duration:r,update:function(r){var n=Math.floor(r/t),i=0===n?e.length-1:n-1,l=(r-t*n)/t,a=e[i]+l*(e[n]-e[i]);c.current.setAttribute("height",String(a))}})}),[r]),c}(i,t.useMemo((function(){return 0===c?2.15*l:2===c?.7*l:l}),[l]));return r.createElement("rect",{ref:a,x:15*c,rx:"3",width:"10",height:i[i.length-1]})};var l="function"==typeof Float32Array;function a(e,t){return 1-3*t+3*e}function o(e,t){return 3*t-6*e}function u(e){return 3*e}function s(e,t,r){return((a(t,r)*e+o(t,r))*e+u(t))*e}function f(e,t,r){return 3*a(t,r)*e*e+2*o(t,r)*e+u(t)}function d(e){return e}var m=function(e,t,r,n){if(!(0<=e&&e<=1&&0<=r&&r<=1))throw new Error("bezier x values must be in [0, 1] range");if(e===t&&r===n)return d;for(var c=l?new Float32Array(11):new Array(11),i=0;i<11;++i)c[i]=s(.1*i,e,r);function a(t){for(var n=0,i=1;10!==i&&c[i]<=t;++i)n+=.1;--i;var l=n+.1*((t-c[i])/(c[i+1]-c[i])),a=f(l,e,r);return a>=.001?function(e,t,r,n){for(var c=0;c<4;++c){var i=f(t,r,n);if(0===i)return t;t-=(s(t,r,n)-e)/i}return t}(t,l,e,r):0===a?l:function(e,t,r,n,c){var i,l,a=0;do{(i=s(l=t+(r-t)/2,n,c)-e)>0?r=l:t=l}while(Math.abs(i)>1e-7&&++a<10);return l}(t,n,n+.1,e,r)}return function(e){return 0===e?0:1===e?1:s(a(e),t,n)}},v=m(.165,.84,.44,1),p=m(.3,.61,.355,1);var g=[1,2.2,4.4,6.7,8.9,11.1,13.3];var y=[0,.3,.8,.1,.6,.4,.7,.5,.2];var h=[110,100,90,80,70,60,50,40,140,120];function E(e){var t=Math.floor(e/.1),r=0===t?h.length-1:t-1,n=h[r]+(e-.1*t)/.1*(h[t]-h[r]);return[n,(140-n)/2]}var w=[237.5,425,50],x=[50,425,425];var b=function(){return(b=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var c in t=arguments[r])Object.prototype.hasOwnProperty.call(t,c)&&(e[c]=t[c]);return e}).apply(this,arguments)};e.Audio=function(e){for(var t=e.strokeColor,n=e.duration,l=[],a=0,o=c.length;a<o;a+=1)l.push(r.createElement(i,{key:a,index:a,level:c[a],duration:n}));return r.createElement("div",{className:"preloader-icon__audio"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 55 80"},r.createElement("g",{transform:"matrix(1 0 0 -1 0 80)",fill:t,strokeWidth:0},l)))},e.BallTriangle=function(e){var c=e.strokeWidth,i=e.strokeColor,l=e.duration,a=t.useMemo((function(){return 50-c/2}),[c]),o=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current.querySelectorAll("circle");return n({duration:e,update:function(e){for(var r=Math.floor(e/.3333333333333333),n=(e-.3333333333333333*r)/.3333333333333333,c=0,i=t.length;c<i;c+=1){var l=r+c,a=0===(l=l>=3?l-3:l)?2:l-1,o=w[a]+n*(w[l]-w[a]),u=x[a]+n*(x[l]-x[a]);t[c].setAttribute("cx",String(o)),t[c].setAttribute("cy",String(u))}}})}),[e]),r}(l);return r.createElement("div",{className:"preloader-icon__ball-triangle"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 475 475"},r.createElement("g",{ref:o,fill:"none",stroke:i,strokeWidth:c},r.createElement("circle",{cx:"50",cy:"425",r:a}),r.createElement("circle",{cx:"237.5",cy:"50",r:a}),r.createElement("circle",{cx:"425",cy:"425",r:a}))))},e.Bars=function(e){var c=e.strokeColor,i=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current,c=[].slice.call(t.querySelectorAll("rect")),i=c[0],l=c[1],a=c[2],o=c[3],u=c[4],s=n({duration:e,update:function(e){var t=E(e),r=t[0],n=t[1];a.setAttribute("height",String(r)),a.setAttribute("y",String(n))}}),f=n({duration:e,delay:.25*e,update:function(e){var t=E(e),r=t[0],n=t[1];l.setAttribute("height",String(r)),o.setAttribute("height",String(r)),l.setAttribute("y",String(n)),o.setAttribute("y",String(n))}}),d=n({duration:e,delay:.5*e,update:function(e){var t=E(e),r=t[0],n=t[1];i.setAttribute("height",String(r)),u.setAttribute("height",String(r)),i.setAttribute("y",String(n)),u.setAttribute("y",String(n))}});return function(){s(),f(),d()}}),[e]),r}(e.duration);return r.createElement("div",{className:"preloader-icon__bars"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 135 140"},r.createElement("g",{ref:i,fill:c},r.createElement("rect",{x:"0",y:"10",width:"15",height:"120",rx:"6"}),r.createElement("rect",{x:"30",y:"10",width:"15",height:"120",rx:"6"}),r.createElement("rect",{x:"60",y:"0",width:"15",height:"140",rx:"6"}),r.createElement("rect",{x:"90",y:"10",width:"15",height:"120",rx:"6"}),r.createElement("rect",{x:"120",y:"10",width:"15",height:"120",rx:"6"}))))},e.Circles=function(e){var c=e.strokeColor,i=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current,c=[].slice.call(t.querySelectorAll("path")),i=c[0],l=c[1],a=n({duration:.3125*e,update:function(e){i.setAttribute("transform","rotate("+-360*e+", 67, 67)")}}),o=n({duration:e,update:function(e){l.setAttribute("transform","rotate("+360*e+", 67, 67)")}});return function(){a(),o()}}),[e]),r}(e.duration);return r.createElement("div",{className:"preloader-icon__circles"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 135 135"},r.createElement("g",{ref:i,fill:c},r.createElement("path",{d:"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"}),r.createElement("path",{d:"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"}))))},e.Grid=function(e){var c=e.strokeColor,i=function(e){var r=t.useRef();return t.useEffect((function(){for(var t=r.current.querySelectorAll("circle"),c=[],i=function(r,i){c[r]=n({duration:e,delay:e*y[r],update:function(e){var n=Math.abs(1-2*e);t[r].setAttribute("fill-opacity",String(.2+.8*n))}})},l=0,a=t.length;l<a;l+=1)i(l);return function(){for(var e=0,t=c.length;e<t;e+=1)c[e]()}}),[e]),r}(e.duration);return r.createElement("div",{className:"preloader-icon__grid"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100"},r.createElement("g",{ref:i,fill:c},r.createElement("circle",{cx:"12",cy:"12",r:"12"}),r.createElement("circle",{cx:"50",cy:"12",r:"12"}),r.createElement("circle",{cx:"88",cy:"12",r:"12"}),r.createElement("circle",{cx:"12",cy:"50",r:"12"}),r.createElement("circle",{cx:"50",cy:"50",r:"12"}),r.createElement("circle",{cx:"88",cy:"50",r:"12"}),r.createElement("circle",{cx:"12",cy:"88",r:"12"}),r.createElement("circle",{cx:"50",cy:"88",r:"12"}),r.createElement("circle",{cx:"88",cy:"88",r:"12"}))))},e.Hearts=function(e){var c=e.strokeColor,i=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current,c=[].slice.call(t.querySelectorAll("path")),i=c[0],l=c[1];return n({duration:e,update:function(e){var t=e<=.5?2*e:2*(1-e),r=1-t;i.setAttribute("fill-opacity",String(.5+.5*t)),l.setAttribute("fill-opacity",String(.5+.5*r))}})}),[e]),r}(e.duration);return r.createElement("div",{className:"preloader-icon__hearts"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 140 64"},r.createElement("g",{ref:i,fill:c},r.createElement("path",{d:"M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"}),r.createElement("path",{d:"M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"}),r.createElement("path",{d:"M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"}))))},e.Oval=function(e){var c=e.strokeWidth,i=e.strokeColor,l=e.duration,a=t.useMemo((function(){return 50-c/2}),[c]),o=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current;return n({duration:e,update:function(e){t.setAttribute("transform","rotate("+360*e+")")}})}),[e]),r}(l);return r.createElement("div",{className:"preloader-icon__oval"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"-50 -50 100 100"},r.createElement("g",{fill:"none",strokeWidth:c,stroke:i},r.createElement("circle",{strokeOpacity:".5",r:a}),r.createElement("path",{ref:o,d:"M0,-"+a+" a"+a+","+a+" 0 0,1 "+a+","+a,strokeWidth:c,stroke:i}))))},e.Preloader=function(e){var t=e.className,n=void 0===t?"":t,c=e.style,i=void 0===c?{}:c,l=e.use,a=e.size,o=void 0===a?"100%":a,u=e.strokeWidth,s=void 0===u?3:u,f=e.strokeColor,d=void 0===f?"#f0ad4e":f,m=e.duration,v=void 0===m?800:m,p=Number.isNaN(Number(o))?o:o+"px";return r.createElement("div",{className:"preloader-icon "+n,style:b({width:p},i)},r.createElement("div",{className:"preloader-icon__inner",style:{width:"100%",position:"relative",overflow:"hidden",backfaceVisibility:"hidden",lineHeight:0}},r.createElement("em",{className:"preloader-icon__title",style:{position:"absolute",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}},"Loading..."),r.createElement(l,{strokeWidth:s,strokeColor:d,duration:v})))},e.Puff=function(e){var c=e.strokeWidth,i=e.strokeColor,l=e.duration,a=function(e,r){var c=t.useRef();return t.useEffect((function(){var t=c.current.querySelectorAll("circle");return n({duration:r,update:function(r){var n=r>=.5?r-.5:r+.5;t[0].setAttribute("r",String(v(r)*e)),t[0].style.strokeOpacity=String(1-p(r)),t[1].setAttribute("r",String(v(n)*e)),t[1].style.strokeOpacity=String(1-p(n))}})}),[e,r]),c}(t.useMemo((function(){return 50-c/2}),[c]),l);return r.createElement("div",{className:"preloader-icon__puff"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"-50 -50 100 100"},r.createElement("g",{ref:a,strokeWidth:c,stroke:i,fill:"none"},r.createElement("circle",{r:"0",style:{strokeOpacity:1}}),r.createElement("circle",{r:"0",style:{strokeOpacity:1}}))))},e.Rings=function(e){var c=e.strokeColor,i=e.strokeWidth,l=function(e,r){var c=t.useRef(),i=t.useRef(),l=t.useRef();return t.useEffect((function(){var t=n({duration:r/2,update:function(e){var t=Math.floor(e/.14285714285714285),r=0===t?g.length-1:t-1,n=g[r]+(e-.14285714285714285*t)/.14285714285714285*(g[t]-g[r]);l.current.setAttribute("r",String(n))}}),a=n({duration:r,delay:r/2,update:function(t){c.current.setAttribute("r",String(36.7*t+13.3)),c.current.setAttribute("stroke-opacity",String(1-t)),c.current.setAttribute("stroke-width",String(e-e*t))}}),o=n({duration:r,delay:r,update:function(t){i.current.setAttribute("r",String(36.7*t+13.3)),i.current.setAttribute("stroke-opacity",String(1-t)),i.current.setAttribute("stroke-width",String(e-e*t))}});return function(){t(),a(),o()}}),[r,e]),[c,i,l]}(i,e.duration),a=l[0],o=l[1],u=l[2];return r.createElement("div",{className:"preloader-icon__oval"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"-50 -50 100 100"},r.createElement("g",{stroke:c,strokeWidth:i,fill:"none"},r.createElement("circle",{ref:a,cx:"0",cy:"0",r:"13.3",strokeOpacity:"0"}),r.createElement("circle",{ref:o,cx:"0",cy:"0",r:"13.3",strokeOpacity:"0"}),r.createElement("circle",{ref:u,cx:"0",cy:"0",r:"13.3"}))))},e.Spinning=function(e){var c=e.strokeWidth,i=e.strokeColor,l=e.duration,a=t.useMemo((function(){return 50-c/2}),[c]),o=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current.querySelectorAll("circle"),c=t.length,i=1/c,l=0;return n({duration:e,update:function(e){var r,n,a=Math.floor(e/i);a-1===l||0===a&&l===c-1||((n=t[l]).style.fillOpacity="0",l=0===a?c-1:a-1);var o=(e-i*a)/i;r=t[a],n=t[l],r.style.fillOpacity=String(o),n.style.fillOpacity=String(1-o)}})}),[e]),r}(l);return r.createElement("div",{className:"preloader-icon__spinning"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 540 540"},r.createElement("g",{ref:o,stroke:i,strokeWidth:c},r.createElement("circle",{cx:"490",cy:"270",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"425.56",cy:"425.56",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"270",cy:"490",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"114.43",cy:"425.56",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"50",cy:"270",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"114.43",cy:"114.43",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"269.99",cy:"50",r:a,style:{fillOpacity:0},fill:i}),r.createElement("circle",{cx:"425.56",cy:"114.43",r:a,style:{fillOpacity:0},fill:i}))))},e.TailSpin=function(e){var c=e.strokeWidth,i=e.strokeColor,l=e.duration,a=t.useMemo((function(){return 50-c/2}),[c]),o=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current;return n({duration:e,update:function(e){t.setAttribute("transform","rotate("+360*e+")")}})}),[e]),r}(l);return r.createElement("div",{className:"preloader-icon__tail-spin"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"-50 -50 100 100"},r.createElement("defs",null,r.createElement("linearGradient",{id:"tail",x1:"8.042%",y1:"0%",x2:"65.682%",y2:"23.865%"},r.createElement("stop",{stopColor:i,stopOpacity:"0",offset:"0%"}),r.createElement("stop",{stopColor:i,stopOpacity:".631",offset:"63.146%"}),r.createElement("stop",{stopColor:i,offset:"100%"}))),r.createElement("path",{ref:o,d:"M0,-"+a+" a"+a+","+a+" 0 0,1 "+a+","+a,stroke:"url(#tail)",strokeWidth:c,strokeLinecap:"round",fill:"none"})))},e.ThreeDots=function(e){var c=e.strokeColor,i=function(e){var r=t.useRef();return t.useEffect((function(){var t=r.current,c=[].slice.call(t.querySelectorAll("circle")),i=c[0],l=c[1],a=c[2];return n({duration:e,update:function(e){var t=e<=.5?2*e:2*(1-e),r=1-t;i.setAttribute("r",String(9+6*r)),l.setAttribute("r",String(9+6*t)),a.setAttribute("r",String(9+6*r)),i.setAttribute("fill-opacity",String(.5+.5*r)),l.setAttribute("fill-opacity",String(.5+.5*t)),a.setAttribute("fill-opacity",String(.5+.5*r))}})}),[e]),r}(e.duration);return r.createElement("div",{className:"preloader-icon__three-dots"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 120 30"},r.createElement("g",{ref:i,fill:c},r.createElement("circle",{cx:"15",cy:"15",r:"15"}),r.createElement("circle",{cx:"60",cy:"15",r:"9"}),r.createElement("circle",{cx:"105",cy:"15",r:"15"}))))},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=preloader.min.js.map