react-content-loader
Version:
SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)
1 lines • 13.2 kB
Source Map (JSON)
{"version":3,"file":"react-content-loader.es.js","sources":["../src/shared/uid.ts","../src/web/Svg.tsx","../src/web/ContentLoader.tsx","../src/web/presets/FacebookStyle.tsx","../src/web/presets/InstagramStyle.tsx","../src/web/presets/CodeStyle.tsx","../src/web/presets/ListStyle.tsx","../src/web/presets/BulletListStyle.tsx"],"sourcesContent":["export default (): string =>\n Math.random()\n .toString(36)\n .substring(6)\n","import * as React from 'react'\n\nimport uid from '../shared/uid'\nimport { IContentLoaderProps } from './'\n\nconst SVG: React.FC<IContentLoaderProps> = ({\n animate = true,\n backgroundColor = '#f5f6f7',\n backgroundOpacity = 1,\n baseUrl = '',\n children,\n foregroundColor = '#eee',\n foregroundOpacity = 1,\n gradientRatio = 2,\n uniqueKey,\n rtl = false,\n speed = 1.2,\n style = {},\n title = 'Loading...',\n beforeMask = null,\n ...props\n}) => {\n const fixedId = uniqueKey || uid()\n const idClip = `${fixedId}-diff`\n const idGradient = `${fixedId}-animated-diff`\n const idAria = `${fixedId}-aria`\n\n const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : null\n const dur = `${speed}s`\n\n const from = `${gradientRatio * -1} 0`\n const to = `${gradientRatio} 0`\n\n return (\n <svg\n aria-labelledby={idAria}\n role=\"img\"\n style={{ ...style, ...rtlStyle }}\n {...props}\n >\n {title ? <title id={idAria}>{title}</title> : null}\n {beforeMask && React.isValidElement(beforeMask) ? beforeMask : null}\n <rect\n role=\"presentation\"\n x=\"0\"\n y=\"0\"\n width=\"100%\"\n height=\"100%\"\n clipPath={`url(${baseUrl}#${idClip})`}\n style={{ fill: `url(${baseUrl}#${idGradient})` }}\n />\n\n <defs>\n <clipPath id={idClip}>{children}</clipPath>\n\n <linearGradient\n id={idGradient}\n gradientTransform={`translate(${from})`}\n >\n <stop\n offset=\"0%\"\n stopColor={backgroundColor}\n stopOpacity={backgroundOpacity}\n />\n\n <stop\n offset=\"50%\"\n stopColor={foregroundColor}\n stopOpacity={foregroundOpacity}\n />\n\n <stop\n offset=\"100%\"\n stopColor={backgroundColor}\n stopOpacity={backgroundOpacity}\n />\n\n {animate && (\n <animateTransform\n attributeName=\"gradientTransform\"\n type=\"translate\"\n values={`${from}; 0 0; ${to}`}\n dur={dur}\n repeatCount=\"indefinite\"\n />\n )}\n </linearGradient>\n </defs>\n </svg>\n )\n}\n\nexport default SVG\n","import * as React from 'react'\n\nimport { Facebook, IContentLoaderProps } from '.'\nimport Svg from './Svg'\n\nconst ContentLoader: React.FC<IContentLoaderProps> = props =>\n props.children ? <Svg {...props} /> : <Facebook {...props} />\n\nexport default ContentLoader\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (\n <ContentLoader viewBox=\"0 0 476 124\" {...props}>\n <rect x=\"48\" y=\"8\" width=\"88\" height=\"6\" rx=\"3\" />\n <rect x=\"48\" y=\"26\" width=\"52\" height=\"6\" rx=\"3\" />\n <rect x=\"0\" y=\"56\" width=\"410\" height=\"6\" rx=\"3\" />\n <rect x=\"0\" y=\"72\" width=\"380\" height=\"6\" rx=\"3\" />\n <rect x=\"0\" y=\"88\" width=\"178\" height=\"6\" rx=\"3\" />\n <circle cx=\"20\" cy=\"20\" r=\"20\" />\n </ContentLoader>\n)\n\nexport default ReactContentLoaderFacebook\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderInstagram: React.FC<IContentLoaderProps> = props => (\n <ContentLoader viewBox=\"0 0 400 460\" {...props}>\n <circle cx=\"31\" cy=\"31\" r=\"15\" />\n <rect x=\"58\" y=\"18\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" />\n <rect x=\"58\" y=\"34\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" />\n <rect x=\"0\" y=\"60\" rx=\"2\" ry=\"2\" width=\"400\" height=\"400\" />\n </ContentLoader>\n)\n\nexport default ReactContentLoaderInstagram\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderCode: React.FC<IContentLoaderProps> = props => (\n <ContentLoader viewBox=\"0 0 340 84\" {...props}>\n <rect x=\"0\" y=\"0\" width=\"67\" height=\"11\" rx=\"3\" />\n <rect x=\"76\" y=\"0\" width=\"140\" height=\"11\" rx=\"3\" />\n <rect x=\"127\" y=\"48\" width=\"53\" height=\"11\" rx=\"3\" />\n <rect x=\"187\" y=\"48\" width=\"72\" height=\"11\" rx=\"3\" />\n <rect x=\"18\" y=\"48\" width=\"100\" height=\"11\" rx=\"3\" />\n <rect x=\"0\" y=\"71\" width=\"37\" height=\"11\" rx=\"3\" />\n <rect x=\"18\" y=\"23\" width=\"140\" height=\"11\" rx=\"3\" />\n <rect x=\"166\" y=\"23\" width=\"173\" height=\"11\" rx=\"3\" />\n </ContentLoader>\n)\n\nexport default ReactContentLoaderCode\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderListStyle: React.FC<IContentLoaderProps> = props => (\n <ContentLoader viewBox=\"0 0 400 110\" {...props}>\n <rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n <rect x=\"20\" y=\"20\" rx=\"3\" ry=\"3\" width=\"220\" height=\"10\" />\n <rect x=\"20\" y=\"40\" rx=\"3\" ry=\"3\" width=\"170\" height=\"10\" />\n <rect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\" />\n <rect x=\"20\" y=\"80\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\" />\n <rect x=\"20\" y=\"100\" rx=\"3\" ry=\"3\" width=\"80\" height=\"10\" />\n </ContentLoader>\n)\n\nexport default ReactContentLoaderListStyle\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from '..'\nimport ContentLoader from '../ContentLoader'\n\nconst ReactContentLoaderBulletList: React.FC<IContentLoaderProps> = props => (\n <ContentLoader viewBox=\"0 0 245 125\" {...props}>\n <circle cx=\"10\" cy=\"20\" r=\"8\" />\n <rect x=\"25\" y=\"15\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n <circle cx=\"10\" cy=\"50\" r=\"8\" />\n <rect x=\"25\" y=\"45\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n <circle cx=\"10\" cy=\"80\" r=\"8\" />\n <rect x=\"25\" y=\"75\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n <circle cx=\"10\" cy=\"110\" r=\"8\" />\n <rect x=\"25\" y=\"105\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\n </ContentLoader>\n)\n\nexport default ReactContentLoaderBulletList\n"],"names":["React.createElement","React.isValidElement","Svg","Facebook"],"mappings":"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"}