├── .codesandbox
    └── workspace.json
├── App.svelte
├── LoadingOverlay.svelte
├── README.md
├── index.js
├── loading-overlay-queue.js
├── package.json
├── public
    └── index.html
└── rollup.config.js


/.codesandbox/workspace.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "responsive-preview": {
 3 |     "Mobile": [
 4 |       320,
 5 |       675
 6 |     ],
 7 |     "Tablet": [
 8 |       1024,
 9 |       765
10 |     ],
11 |     "Desktop": [
12 |       1400,
13 |       800
14 |     ],
15 |     "Desktop  HD": [
16 |       1920,
17 |       1080
18 |     ]
19 |   }
20 | }


--------------------------------------------------------------------------------
/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import LoadingOverlay from "./LoadingOverlay.svelte";
 3 | 	import {
 4 | 	  showLoadingOverlay,
 5 | 	  hideLoadingOverlay,
 6 | 	  isLoadingOverlayShown,
 7 | 	  loadingOverlayQueue
 8 | 	} from "./loading-overlay-queue";
 9 | 
10 | 	function addLoadingOverlayRequest() {
11 | 	  const id = showLoadingOverlay();
12 | 
13 | 	  setTimeout(() => {
14 | 	    hideLoadingOverlay(id);
15 | 	  }, 5000);
16 | 	}
17 | </script>
18 | 
19 | <main>
20 | 	{#if $isLoadingOverlayShown}
21 | 		<LoadingOverlay />
22 | 	{/if}
23 | 
24 | 	<div class="info">
25 | 		<h3>Number of requests: {$loadingOverlayQueue.length}</h3>
26 | 		<button on:click={addLoadingOverlayRequest}>Add overlay</button>
27 | 	</div>
28 | </main>
29 | 
30 | 
31 | <style>
32 | 	.info {
33 | 	  position: relative;
34 | 	  z-index: 100000;
35 | 	}
36 | </style>


--------------------------------------------------------------------------------
/LoadingOverlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { writable } from "svelte/store";
 3 |   import { tweened } from "svelte/motion";
 4 |   import { linear } from "svelte/easing";
 5 |   import { onDestroy, onMount } from "svelte";
 6 |   import { fade } from "svelte/transition";
 7 | 
 8 |   const progress = tweened(0, { easing: linear, duration: 3000 });
 9 |   const isFirstStage = writable(false);
10 |   let destroyed = false;
11 | 
12 |   async function animate() {
13 |     if (destroyed) {
14 |       return;
15 |     }
16 | 
17 |     await progress.set(100);
18 |     await progress.set(0, { duration: 0 });
19 |     isFirstStage.update(value => !value);
20 |     await animate();
21 |   }
22 | 
23 |   onMount(() => {
24 |     animate();
25 |   });
26 | 
27 |   onDestroy(() => {
28 |     destroyed = true;
29 |   });
30 | </script>
31 | 
32 | <div class="overlay">
33 | 	<svg width="115" height="32" viewBox="0 0 78 32" xmlns="http://www.w3.org/2000/svg">
34 | 		<defs>
35 | 			<linearGradient id="filler">
36 | 				<stop offset={`${$progress}%`} stop-color={$isFirstStage ? '#ff006e' : 'white'} />
37 | 				<stop offset={`${$progress}%`} stop-color={$isFirstStage ? 'white' : '#ff006e'} />
38 | 			</linearGradient>
39 | 		</defs>
40 | 
41 | 		<text x="0" y="24px" fill="url(#filler)">Loading...</text>
42 | 	</svg>
43 | </div>
44 | 
45 | <style>
46 |   .overlay {
47 |     position: fixed;
48 |     top: 0;
49 |     right: 0;
50 |     bottom: 0;
51 |     left: 0;
52 |     z-index: 10001;
53 |     display: flex;
54 |     align-items: center;
55 |     justify-content: center;
56 |     background: #3a86ff;
57 |     font-family: "Arial", sans-serif;
58 |     font-size: 1.375rem;
59 |   }
60 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-loading-overlay
2 | Created with CodeSandbox
3 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import App from "./App.svelte";
2 | 
3 | const app = new App({
4 |   target: document.body
5 | });
6 | 
7 | export default app;
8 | 


--------------------------------------------------------------------------------
/loading-overlay-queue.js:
--------------------------------------------------------------------------------
 1 | import { writable, derived } from "svelte/store";
 2 | import { nanoid } from "nanoid";
 3 | 
 4 | export const loadingOverlayQueue = writable([]);
 5 | 
 6 | export function showLoadingOverlay() {
 7 |   const newRequestId = nanoid();
 8 | 
 9 |   loadingOverlayQueue.update((currentValue) => [...currentValue, newRequestId]);
10 | 
11 |   return newRequestId;
12 | }
13 | 
14 | export function hideLoadingOverlay(requestId) {
15 |   loadingOverlayQueue.update((currentValue) =>
16 |     currentValue.filter((item) => item !== requestId)
17 |   );
18 | }
19 | 
20 | export const isLoadingOverlayShown = derived(
21 |   loadingOverlayQueue,
22 |   (requests) => requests.length > 0
23 | );
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte",
 3 |   "version": "1.0.0",
 4 |   "devDependencies": {
 5 |     "npm-run-all": "^4.1.5",
 6 |     "rollup": "^1.10.1",
 7 |     "rollup-plugin-commonjs": "^9.3.4",
 8 |     "rollup-plugin-node-resolve": "^4.2.3",
 9 |     "rollup-plugin-svelte": "^6.1.1",
10 |     "rollup-plugin-terser": "^4.0.4",
11 |     "sirv-cli": "^0.3.1"
12 |   },
13 |   "dependencies": {
14 |     "nanoid": "3.3.4",
15 |     "svelte": "^3.32.3"
16 |   },
17 |   "scripts": {
18 |     "build": "rollup -c",
19 |     "autobuild": "rollup -c -w",
20 |     "dev": "run-p start:dev autobuild",
21 |     "start": "sirv public",
22 |     "start:dev": "sirv public --dev"
23 |   },
24 |   "keywords": [
25 |     "svelte",
26 |     "starter"
27 |   ],
28 |   "description": "Svelte example starter project"
29 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf8" />
 5 |     <meta name="viewport" content="width=device-width" />
 6 | 
 7 |     <title>Svelte app</title>
 8 | 
 9 |     <link rel="stylesheet" href="public/bundle.css" />
10 |   </head>
11 | 
12 |   <body>
13 |     <script src="bundle.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // this file will not afect the sandbox but will
 2 | // afect the deployment and dowload
 3 | 
 4 | import svelte from "rollup-plugin-svelte";
 5 | import resolve from "rollup-plugin-node-resolve";
 6 | import commonjs from "rollup-plugin-commonjs";
 7 | import { terser } from "rollup-plugin-terser";
 8 | 
 9 | const production = !process.env.ROLLUP_WATCH;
10 | 
11 | export default {
12 |   input: "index.js",
13 |   output: {
14 |     sourcemap: true,
15 |     format: "iife",
16 |     name: "app",
17 |     file: "public/bundle.js"
18 |   },
19 |   plugins: [
20 |     svelte({
21 |       // enable run-time checks when not in production
22 |       dev: !production,
23 |       // we'll extract any component CSS out into
24 |       // a separate file — better for performance
25 |       css: css => {
26 |         css.write("public/bundle.css");
27 |       }
28 |     }),
29 | 
30 |     // If you have external dependencies installed from
31 |     // npm, you'll most likely need these plugins. In
32 |     // some cases you'll need additional configuration —
33 |     // consult the documentation for details:
34 |     // https://github.com/rollup/rollup-plugin-commonjs
35 |     resolve(),
36 |     commonjs(),
37 | 
38 |     // If we're building for production (npm run build
39 |     // instead of npm run dev), minify
40 |     production && terser()
41 |   ]
42 | };
43 | 


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