react-content-loader
Version:
SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)
2 lines (1 loc) • 5.22 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).ContentLoader={},e.React)}(this,function(e,E){"use strict";var p=function(){return(p=Object.assign||function(e){for(var t,r=1,c=arguments.length;r<c;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};function t(e){return E.createElement(e.children?r:c,p({},e))}var r=function(e){var t=e.animate,t=void 0===t||t,r=e.backgroundColor,r=void 0===r?"#f5f6f7":r,c=e.backgroundOpacity,c=void 0===c?1:c,n=e.baseUrl,n=void 0===n?"":n,i=e.children,a=e.foregroundColor,a=void 0===a?"#eee":a,o=e.foregroundOpacity,o=void 0===o?1:o,l=e.gradientRatio,l=void 0===l?2:l,h=e.uniqueKey,d=e.rtl,d=void 0!==d&&d,y=e.speed,y=void 0===y?1.2:y,x=e.style,x=void 0===x?{}:x,m=e.title,m=void 0===m?"Loading...":m,f=e.beforeMask,f=void 0===f?null:f,e=function(e,t){var r={};for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&!~t.indexOf(n)&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var c=0,n=Object.getOwnPropertySymbols(e);c<n.length;c++)!~t.indexOf(n[c])&&Object.prototype.propertyIsEnumerable.call(e,n[c])&&(r[n[c]]=e[n[c]]);return r}(e,["animate","backgroundColor","backgroundOpacity","baseUrl","children","foregroundColor","foregroundOpacity","gradientRatio","uniqueKey","rtl","speed","style","title","beforeMask"]),h=h||Math.random().toString(36).substring(6),u="".concat(h,"-diff"),s="".concat(h,"-animated-diff"),h="".concat(h,"-aria"),d=d?{transform:"scaleX(-1)"}:null,y="".concat(y,"s"),g="".concat(-1*l," 0"),l="".concat(l," 0");return E.createElement("svg",p({"aria-labelledby":h,role:"img",style:p(p({},x),d)},e),m?E.createElement("title",{id:h},m):null,f&&E.isValidElement(f)?f:null,E.createElement("rect",{role:"presentation",x:"0",y:"0",width:"100%",height:"100%",clipPath:"url(".concat(n,"#").concat(u,")"),style:{fill:"url(".concat(n,"#").concat(s,")")}}),E.createElement("defs",null,E.createElement("clipPath",{id:u},i),E.createElement("linearGradient",{id:s,gradientTransform:"translate(".concat(g,")")},E.createElement("stop",{offset:"0%",stopColor:r,stopOpacity:c}),E.createElement("stop",{offset:"50%",stopColor:a,stopOpacity:o}),E.createElement("stop",{offset:"100%",stopColor:r,stopOpacity:c}),t&&E.createElement("animateTransform",{attributeName:"gradientTransform",type:"translate",values:"".concat(g,"; 0 0; ").concat(l),dur:y,repeatCount:"indefinite"}))))},c=function(e){return E.createElement(t,p({viewBox:"0 0 476 124"},e),E.createElement("rect",{x:"48",y:"8",width:"88",height:"6",rx:"3"}),E.createElement("rect",{x:"48",y:"26",width:"52",height:"6",rx:"3"}),E.createElement("rect",{x:"0",y:"56",width:"410",height:"6",rx:"3"}),E.createElement("rect",{x:"0",y:"72",width:"380",height:"6",rx:"3"}),E.createElement("rect",{x:"0",y:"88",width:"178",height:"6",rx:"3"}),E.createElement("circle",{cx:"20",cy:"20",r:"20"}))};e.BulletList=function(e){return E.createElement(t,p({viewBox:"0 0 245 125"},e),E.createElement("circle",{cx:"10",cy:"20",r:"8"}),E.createElement("rect",{x:"25",y:"15",rx:"5",ry:"5",width:"220",height:"10"}),E.createElement("circle",{cx:"10",cy:"50",r:"8"}),E.createElement("rect",{x:"25",y:"45",rx:"5",ry:"5",width:"220",height:"10"}),E.createElement("circle",{cx:"10",cy:"80",r:"8"}),E.createElement("rect",{x:"25",y:"75",rx:"5",ry:"5",width:"220",height:"10"}),E.createElement("circle",{cx:"10",cy:"110",r:"8"}),E.createElement("rect",{x:"25",y:"105",rx:"5",ry:"5",width:"220",height:"10"}))},e.Code=function(e){return E.createElement(t,p({viewBox:"0 0 340 84"},e),E.createElement("rect",{x:"0",y:"0",width:"67",height:"11",rx:"3"}),E.createElement("rect",{x:"76",y:"0",width:"140",height:"11",rx:"3"}),E.createElement("rect",{x:"127",y:"48",width:"53",height:"11",rx:"3"}),E.createElement("rect",{x:"187",y:"48",width:"72",height:"11",rx:"3"}),E.createElement("rect",{x:"18",y:"48",width:"100",height:"11",rx:"3"}),E.createElement("rect",{x:"0",y:"71",width:"37",height:"11",rx:"3"}),E.createElement("rect",{x:"18",y:"23",width:"140",height:"11",rx:"3"}),E.createElement("rect",{x:"166",y:"23",width:"173",height:"11",rx:"3"}))},e.Facebook=c,e.Instagram=function(e){return E.createElement(t,p({viewBox:"0 0 400 460"},e),E.createElement("circle",{cx:"31",cy:"31",r:"15"}),E.createElement("rect",{x:"58",y:"18",rx:"2",ry:"2",width:"140",height:"10"}),E.createElement("rect",{x:"58",y:"34",rx:"2",ry:"2",width:"140",height:"10"}),E.createElement("rect",{x:"0",y:"60",rx:"2",ry:"2",width:"400",height:"400"}))},e.List=function(e){return E.createElement(t,p({viewBox:"0 0 400 110"},e),E.createElement("rect",{x:"0",y:"0",rx:"3",ry:"3",width:"250",height:"10"}),E.createElement("rect",{x:"20",y:"20",rx:"3",ry:"3",width:"220",height:"10"}),E.createElement("rect",{x:"20",y:"40",rx:"3",ry:"3",width:"170",height:"10"}),E.createElement("rect",{x:"0",y:"60",rx:"3",ry:"3",width:"250",height:"10"}),E.createElement("rect",{x:"20",y:"80",rx:"3",ry:"3",width:"200",height:"10"}),E.createElement("rect",{x:"20",y:"100",rx:"3",ry:"3",width:"80",height:"10"}))},e.default=t,Object.defineProperty(e,"__esModule",{value:!0})});