├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── CHANGELOG.md
├── README.md
├── package.json
├── prettier.config.js
├── rollup.config.js
└── src
    ├── BulletListLoader.svelte
    ├── CodeLoader.svelte
    ├── ContentLoader.svelte
    ├── FacebookLoader.svelte
    ├── InstagramLoader.svelte
    ├── ListLoader.svelte
    ├── TableLoader.svelte
    └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | insert_final_newline = true
 6 | 
 7 | [*.{js,css,html,svelte}]
 8 | charset = utf-8
 9 | indent_style = tab
10 | indent_size = 4
11 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "eslint:recommended",
 3 |     "parserOptions": {
 4 |         "ecmaVersion": 2019,
 5 |         "sourceType": "module"
 6 |     },
 7 |     "plugins": ["svelte3"],
 8 |     "overrides": [{
 9 |         "files": ["**/*.svelte"],
10 |         "processor": "svelte3/svelte3"
11 |     }],
12 |     "env": {
13 |         "es6": true,
14 |         "browser": true
15 |     }
16 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | node_modules
4 | yarn.lock
5 | package-lock.json
6 | *.log
7 | .idea/
8 | index.js
9 | index.mjs


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # svelte-content-loader changelog
 2 | 
 3 | ## 1.1.3
 4 | * prettier config added
 5 | * a11y improved
 6 | * props of built-in loaders
 7 | * TableLoader added
 8 | 
 9 | ## 1.1.2
10 | * eslint added
11 | * CHANGELOG & editorconfig added
12 | 
13 | ## 1.1.1
14 | * README updated
15 | 
16 | ## 1.1.0
17 | * Update to latest Svelte 3
18 | * Few new props added: baseUrl, primaryOpacity, secondaryOpacity
19 | 
20 | ## 1.0.0
21 | 
22 | * First release
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte Content Loader for Svelte 3
  2 | 
  3 | [![NPM version](https://img.shields.io/npm/v/svelte-content-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-content-loader) [![NPM downloads](https://img.shields.io/npm/dm/svelte-content-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-content-loader)
  4 | 
  5 | SVG component to create placeholder loading, like Facebook cards loading.
  6 | 
  7 | ![preview](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)
  8 | 
  9 | ## Features
 10 | 
 11 | This is a Svelte port for [vue-content-loader](https://github.com/egoist/vue-content-loader).
 12 | 
 13 | - Completely customizable: you can change the colors, speed and sizes.
 14 | - You can use it right now: there are a lot of presets already.
 15 | - Performance:
 16 |   - Tree-shakable and highly optimized bundle.
 17 |   - Pure SVG, so it's works without any javascript, canvas, etc.
 18 |   - Vanilla JS components.
 19 | 
 20 | ## Install
 21 | 
 22 | ```bash
 23 | npm i svelte-content-loader --save
 24 | ```
 25 | 
 26 | ```bash
 27 | yarn add svelte-content-loader
 28 | ```
 29 | 
 30 | CDN: [UNPKG](https://unpkg.com/svelte-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-content-loader/) (available as `window.ContentLoader`)
 31 | 
 32 | ## Usage
 33 | 
 34 | ```html
 35 | <ContentLoader/>
 36 | 
 37 | <script>
 38 | import ContentLoader from 'svelte-content-loader';
 39 | </script>
 40 | ```
 41 | 
 42 | ### Built-in loaders
 43 | 
 44 | ```js
 45 | import {
 46 |   FacebookLoader,
 47 |   CodeLoader,
 48 |   BulletListLoader,
 49 |   InstagramLoader,
 50 |   ListLoader
 51 | } from 'svelte-content-loader'
 52 | ```
 53 | 
 54 | `ContentLoader` is a meta loader while other loaders are just higher-order components of it. By default `ContentLoader` only displays a simple rectangle, here's how you can use it to create custom loaders:
 55 | 
 56 | ```html
 57 | <ContentLoader>
 58 |   <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
 59 |   <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
 60 |   <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
 61 |   <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
 62 |   <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
 63 |   <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
 64 | </ContentLoader>
 65 | ```
 66 | 
 67 | This is also how [ListLoader](./src/ListLoader.svelte) is created.
 68 | 
 69 | If you are **not** using using es6, instead of importing add 
 70 | 
 71 | ```html
 72 | <script src="/path/to/svelte-content-loader/index.js"></script>
 73 | ```
 74 | 
 75 | just before closing body tag. 
 76 | 
 77 | ## API
 78 | 
 79 | ### Props
 80 | 
 81 | |Name|Type|Default|Description|
 82 | |---|---|---|---|
 83 | |width|number|`400`||
 84 | |height|number|`130`||
 85 | |speed|number|`2`||
 86 | |preserveAspectRatio|string|`'xMidYMid meet'`||
 87 | |primaryColor|string|`'#f9f9f9'`||
 88 | |secondaryColor|string|`'#ecebeb'`||
 89 | |uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
 90 | |animate|boolean|`true`||
 91 | |baseUrl|string|empty string|Required if you're using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <ContentLoader bind:baseUrl={pathname} /> which will fill the SVG attribute with the relative path.
 92 | |primaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
 93 | |secondaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
 94 | 
 95 | 
 96 | ## Credits
 97 | 
 98 | This is basically a Svelte port for [vue-content-loader](https://github.com/egoist/vue-content-loader).
 99 | 
100 | ## License
101 | 
102 | MIT &copy; [PaulMaly](https://github.com/PaulMaly)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-content-loader",
 3 |     "version": "1.1.3",
 4 |     "description": "Svelte Content Loader for Svelte 3",
 5 |     "svelte": "src/index.js",
 6 |     "main": "index.js",
 7 |     "module": "index.mjs",
 8 |     "scripts": {
 9 |         "build": "rollup -c",
10 |         "prepublishOnly": "npm run lint & npm run build",
11 |         "lint": "eslint src/*.svelte"
12 |     },
13 |     "files": [
14 |         "src",
15 |         "index.mjs",
16 |         "index.js"
17 |     ],
18 |     "repository": {
19 |         "type": "git",
20 |         "url": "git+https://github.com/PaulMaly/svelte-content-loader.git"
21 |     },
22 |     "keywords": [
23 |         "svelte"
24 |     ],
25 |     "author": "PaulMaly",
26 |     "license": "MIT",
27 |     "bugs": {
28 |         "url": "https://github.com/PaulMaly/svelte-content-loader/issues"
29 |     },
30 |     "homepage": "https://github.com/PaulMaly/svelte-content-loader#readme",
31 |     "devDependencies": {
32 |         "eslint": "latest",
33 |         "eslint-plugin-svelte3": "latest",
34 |         "rollup": "latest",
35 |         "rollup-plugin-node-resolve": "latest",
36 |         "rollup-plugin-svelte": "latest",
37 |         "svelte": "latest"
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	tabWidth: 4,
 3 | 	semi: true,
 4 | 	singleQuote: true,
 5 | 	svelteSortOrder: 'markup-scripts-styles',
 6 | 	svelteStrictMode: false,
 7 | 	svelteBracketNewLine: true,
 8 | 	svelteAllowShorthand: false,
 9 | 	plugins: ['svelte']
10 | };


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import pkg from './package.json';
 4 | 
 5 | const name = pkg.name
 6 |                 .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
 7 |                 .replace(/^\w/, m => m.toUpperCase())
 8 |                 .replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 | 	input: 'src/index.js',
12 | 	output: [
13 | 		{ file: pkg.module, 'format': 'es' },
14 | 		{ file: pkg.main, 'format': 'umd', name }
15 | 	],
16 | 	plugins: [
17 | 		svelte(),
18 | 		resolve()
19 | 	]
20 | };


--------------------------------------------------------------------------------
/src/BulletListLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader {...$$props}>
 3 | 	<circle cx="10" cy="20" r="8" />
 4 | 	<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
 5 | 	<circle cx="10" cy="50" r="8" />
 6 | 	<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
 7 | 	<circle cx="10" cy="80" r="8" />
 8 | 	<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
 9 | 	<circle cx="10" cy="110" r="8" />
10 | 	<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
11 | </ContentLoader>
12 | 
13 | <script>
14 | 	import ContentLoader from './ContentLoader.svelte';
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/CodeLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader {...$$props}>
 3 |     <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
 4 |     <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
 5 |     <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
 6 |     <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
 7 |     <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
 8 |     <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
 9 |     <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
10 |     <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
11 |     <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
12 | </ContentLoader>
13 | 
14 | <script>
15 | 	import ContentLoader from './ContentLoader.svelte';
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/ContentLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svg {width} {height} viewBox="0 0 {width} {height}" version="1.1" ria-labelledby="loading-aria" {preserveAspectRatio}>
 2 | 	<title id="loading-aria">Loading...</title>
 3 | 	<rect
 4 | 		style="fill: url({baseUrl}#{idGradient})"
 5 | 		clip-path="url({baseUrl}#{idClip})"
 6 | 		{width} {height}
 7 | 		x="0" y="0"
 8 | 	/>
 9 | 	<defs>
10 | 		<clipPath id={idClip}>
11 | 			<slot>
12 | 				<rect {width} {height} x="0" y="0" rx="5" ry="5"/>
13 | 			</slot>
14 | 		</clipPath>
15 | 		<linearGradient id={idGradient}>
16 | 			<stop stop-color={primaryColor} stop-opacity={primaryOpacity} offset="0%">
17 | 				{#if animate}
18 | 				<animate
19 | 					dur="{speed}s"
20 | 					values="-2; 1"
21 | 					attributeName="offset"
22 | 					repeatCount="indefinite"
23 | 				/>
24 | 				{/if}
25 | 			</stop>
26 | 			<stop stop-color={secondaryColor} stop-opacity={secondaryOpacity} offset="50%">
27 | 				{#if animate}
28 | 				<animate
29 | 					dur="{speed}s"
30 | 					values="-1.5; 1.5"
31 | 					attributeName="offset"
32 | 					repeatCount="indefinite"
33 | 				/>
34 | 				{/if}
35 | 			</stop>
36 | 			<stop stop-color={primaryColor} stop-opacity={primaryOpacity} offset="100%">
37 | 				{#if animate}
38 | 				<animate
39 | 					dur="{speed}s"
40 | 					values="-1; 2"
41 | 					attributeName="offset"
42 | 					repeatCount="indefinite"
43 | 				/>
44 | 				{/if}
45 | 			</stop>
46 | 		</linearGradient>
47 | 	</defs>
48 | </svg>
49 | 
50 | <script>
51 | 	function uid() {
52 | 		return Math.random().toString(36).substring(2);
53 | 	}
54 | 
55 | 	export let preserveAspectRatio = 'xMidYMid meet',
56 | 		secondaryColor = '#ecebeb',
57 | 		primaryColor = '#f9f9f9',
58 | 		secondaryOpacity = 1,
59 | 		primaryOpacity = 1,
60 | 		animate = true,
61 | 		baseUrl = '',
62 | 		height = 130,
63 | 		width = 400,
64 | 		speed = 2,
65 | 		uniqueKey;
66 | 
67 | 	$: idClip = uniqueKey ? `${uniqueKey}-idClip` : uid();
68 | 	$: idGradient = uniqueKey ? `${uniqueKey}-idGradient` : uid();
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/FacebookLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader {...$$props}>
 3 |     <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
 4 |     <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
 5 |     <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
 6 |     <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
 7 |     <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
 8 |     <circle cx="30" cy="30" r="30" />
 9 | </ContentLoader>
10 | 
11 | <script>
12 | 	import ContentLoader from './ContentLoader.svelte';
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/InstagramLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader height={480} {...$$props}>
 3 |     <circle cx="30" cy="30" r="30" />
 4 |     <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
 5 |     <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
 6 |     <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
 7 | </ContentLoader>
 8 | 
 9 | <script>
10 | 	import ContentLoader from './ContentLoader.svelte';
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/ListLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader {...$$props}>
 3 |     <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
 4 |     <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
 5 |     <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
 6 |     <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
 7 |     <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
 8 |     <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
 9 | </ContentLoader>
10 | 
11 | <script>
12 | 	import ContentLoader from './ContentLoader.svelte';
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/TableLoader.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:options namespace="svg" />
 2 | <ContentLoader {...$$props}>
 3 |     <rect x="51" y="45" rx="3" ry="3" width="906" height="17" />
 4 |     <circle cx="879" cy="123" r="11" />
 5 |     <circle cx="914" cy="123" r="11" />
 6 |     <rect x="104" y="115" rx="3" ry="3" width="141" height="15" />
 7 |     <rect x="305" y="114" rx="3" ry="3" width="299" height="15" />
 8 |     <rect x="661" y="114" rx="3" ry="3" width="141" height="15" />
 9 |     <rect x="55" y="155" rx="3" ry="3" width="897" height="2" />
10 |     <circle cx="880" cy="184" r="11" />
11 |     <circle cx="915" cy="184" r="11" />
12 |     <rect x="105" y="176" rx="3" ry="3" width="141" height="15" />
13 |     <rect x="306" y="175" rx="3" ry="3" width="299" height="15" />
14 |     <rect x="662" y="175" rx="3" ry="3" width="141" height="15" />
15 |     <rect x="56" y="216" rx="3" ry="3" width="897" height="2" />
16 |     <circle cx="881" cy="242" r="11" />
17 |     <circle cx="916" cy="242" r="11" />
18 |     <rect x="106" y="234" rx="3" ry="3" width="141" height="15" />
19 |     <rect x="307" y="233" rx="3" ry="3" width="299" height="15" />
20 |     <rect x="663" y="233" rx="3" ry="3" width="141" height="15" />
21 |     <rect x="57" y="274" rx="3" ry="3" width="897" height="2" />
22 |     <circle cx="882" cy="303" r="11" />
23 |     <circle cx="917" cy="303" r="11" />
24 |     <rect x="107" y="295" rx="3" ry="3" width="141" height="15" />
25 |     <rect x="308" y="294" rx="3" ry="3" width="299" height="15" />
26 |     <rect x="664" y="294" rx="3" ry="3" width="141" height="15" />
27 |     <rect x="58" y="335" rx="3" ry="3" width="897" height="2" />
28 |     <circle cx="881" cy="363" r="11" />
29 |     <circle cx="916" cy="363" r="11" />
30 |     <rect x="106" y="355" rx="3" ry="3" width="141" height="15" />
31 |     <rect x="307" y="354" rx="3" ry="3" width="299" height="15" />
32 |     <rect x="663" y="354" rx="3" ry="3" width="141" height="15" />
33 |     <rect x="57" y="395" rx="3" ry="3" width="897" height="2" />
34 |     <circle cx="882" cy="424" r="11" />
35 |     <circle cx="917" cy="424" r="11" />
36 |     <rect x="107" y="416" rx="3" ry="3" width="141" height="15" />
37 |     <rect x="308" y="415" rx="3" ry="3" width="299" height="15" />
38 |     <rect x="664" y="415" rx="3" ry="3" width="141" height="15" />
39 |     <rect x="55" y="453" rx="3" ry="3" width="897" height="2" />
40 |     <rect x="51" y="49" rx="3" ry="3" width="2" height="465" />
41 |     <rect x="955" y="49" rx="3" ry="3" width="2" height="465" />
42 |     <circle cx="882" cy="484" r="11" />
43 |     <circle cx="917" cy="484" r="11" />
44 |     <rect x="107" y="476" rx="3" ry="3" width="141" height="15" />
45 |     <rect x="308" y="475" rx="3" ry="3" width="299" height="15" />
46 |     <rect x="664" y="475" rx="3" ry="3" width="141" height="15" />
47 |     <rect x="55" y="513" rx="3" ry="3" width="897" height="2" />
48 |     <rect x="52" y="80" rx="3" ry="3" width="906" height="17" />
49 |     <rect x="53" y="57" rx="3" ry="3" width="68" height="33" />
50 |     <rect x="222" y="54" rx="3" ry="3" width="149" height="33" />
51 |     <rect x="544" y="55" rx="3" ry="3" width="137" height="33" />
52 |     <rect x="782" y="56" rx="3" ry="3" width="72" height="33" />
53 |     <rect x="933" y="54" rx="3" ry="3" width="24" height="33" />
54 | </ContentLoader>
55 | 
56 | <script>
57 |     import ContentLoader from './ContentLoader.svelte';
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ContentLoader.svelte';
2 | export { default as BulletListLoader } from './BulletListLoader.svelte';
3 | export { default as CodeLoader } from './CodeLoader.svelte';
4 | export { default as FacebookLoader } from './FacebookLoader.svelte';
5 | export { default as ListLoader } from './ListLoader.svelte';
6 | export { default as InstagramLoader } from './InstagramLoader.svelte';
7 | export { default as TableLoader } from './TableLoader.svelte';
8 | 


--------------------------------------------------------------------------------