svelte-loading-spinners
Advanced tools
Comparing version 0.3.4 to 0.3.5
116
package.json
{ | ||
"name": "svelte-loading-spinners", | ||
"version": "0.3.4", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/schum123/svelte-loading-spinners.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/schum123/svelte-loading-spinners/issues" | ||
}, | ||
"homepage": "https://github.com/schum123/svelte-loading-spinners#readme", | ||
"description": "Loading spinners using the svelte framework.", | ||
"license": "MIT", | ||
"author": "Eric Schumertl", | ||
"keywords": [ | ||
"svelte" | ||
], | ||
"devDependencies": { | ||
"@sveltejs/adapter-auto": "next", | ||
"@sveltejs/kit": "next", | ||
"@sveltejs/package": "next", | ||
"@typescript-eslint/eslint-plugin": "^5.27.0", | ||
"@typescript-eslint/parser": "^5.27.0", | ||
"eslint": "^8.16.0", | ||
"eslint-config-prettier": "^8.3.0", | ||
"eslint-plugin-svelte3": "^4.0.0", | ||
"prettier": "^2.6.2", | ||
"prettier-plugin-svelte": "^2.7.0", | ||
"svelte": "^3.44.0", | ||
"svelte-check": "^2.7.1", | ||
"svelte-preprocess": "^4.10.6", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.7.4", | ||
"vite": "^3.1.0" | ||
}, | ||
"type": "module", | ||
"exports": { | ||
"./package.json": "./package.json", | ||
"./ArrowDown.svelte": "./ArrowDown.svelte", | ||
"./ArrowUp.svelte": "./ArrowUp.svelte", | ||
"./BarLoader.svelte": "./BarLoader.svelte", | ||
"./Chasing.svelte": "./Chasing.svelte", | ||
"./Circle.svelte": "./Circle.svelte", | ||
"./Circle2.svelte": "./Circle2.svelte", | ||
"./Circle3.svelte": "./Circle3.svelte", | ||
"./Clock.svelte": "./Clock.svelte", | ||
"./Diamonds.svelte": "./Diamonds.svelte", | ||
"./DoubleBounce.svelte": "./DoubleBounce.svelte", | ||
"./Firework.svelte": "./Firework.svelte", | ||
"./GoogleSpin.svelte": "./GoogleSpin.svelte", | ||
".": "./index.js", | ||
"./Jellyfish.svelte": "./Jellyfish.svelte", | ||
"./Jumper.svelte": "./Jumper.svelte", | ||
"./Moon.svelte": "./Moon.svelte", | ||
"./Plane.svelte": "./Plane.svelte", | ||
"./Puff.svelte": "./Puff.svelte", | ||
"./Pulse.svelte": "./Pulse.svelte", | ||
"./Rainbow.svelte": "./Rainbow.svelte", | ||
"./RingLoader.svelte": "./RingLoader.svelte", | ||
"./ScaleOut.svelte": "./ScaleOut.svelte", | ||
"./Shadow.svelte": "./Shadow.svelte", | ||
"./SpinLine.svelte": "./SpinLine.svelte", | ||
"./Square.svelte": "./Square.svelte", | ||
"./Stretch.svelte": "./Stretch.svelte", | ||
"./SyncLoader.svelte": "./SyncLoader.svelte", | ||
"./types/spinner.type": "./types/spinner.type.js", | ||
"./utils": "./utils.js", | ||
"./Wave.svelte": "./Wave.svelte" | ||
}, | ||
"svelte": "./index.js" | ||
} | ||
"name": "svelte-loading-spinners", | ||
"version": "0.3.5", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/schum123/svelte-loading-spinners.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/schum123/svelte-loading-spinners/issues" | ||
}, | ||
"homepage": "https://github.com/schum123/svelte-loading-spinners#readme", | ||
"description": "Loading spinners using the svelte framework.", | ||
"license": "MIT", | ||
"author": "Eric Schumertl", | ||
"keywords": [ | ||
"svelte" | ||
], | ||
"scripts": { | ||
"dev": "vite dev", | ||
"build": "svelte-kit sync && svelte-package && npm run patch", | ||
"patch": "npx tsx scripts/patch-package.ts", | ||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", | ||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", | ||
"lint": "prettier --plugin-search-dir . --check . && eslint .", | ||
"format": "prettier --plugin-search-dir . --write ." | ||
}, | ||
"devDependencies": { | ||
"@sveltejs/adapter-auto": "next", | ||
"@sveltejs/kit": "next", | ||
"@sveltejs/package": "next", | ||
"@types/node": "^20.11.20", | ||
"@typescript-eslint/eslint-plugin": "^5.27.0", | ||
"@typescript-eslint/parser": "^5.27.0", | ||
"eslint": "^8.16.0", | ||
"eslint-config-prettier": "^8.3.0", | ||
"eslint-plugin-svelte3": "^4.0.0", | ||
"prettier": "^2.6.2", | ||
"prettier-plugin-svelte": "^2.7.0", | ||
"svelte": "^3.44.0", | ||
"svelte-check": "^2.7.1", | ||
"svelte-preprocess": "^4.10.6", | ||
"tslib": "^2.3.1", | ||
"typescript": "^4.7.4", | ||
"vite": "^3.1.0" | ||
}, | ||
"type": "module" | ||
} |
@@ -19,8 +19,19 @@ # svelte-loading-spinners | ||
Import `navigating` from `$app/stores`. | ||
When navigating starts, it's value is a Navigation object with from, to, type and (if type === 'popstate') delta properties. When navigating finishes, its value reverts to null. | ||
Read More: [Sveltekit Docs](https://kit.svelte.dev/docs/modules#$app-stores-navigating) and [Stackoverflow](https://stackoverflow.com/questions/70218035/sveltekit-loading-indicator-when-a-page-load-time-threshold-is-exceeded) | ||
By using an `{#if $navigating}` this allows us to show the loading animation when the page is loading and stop once it's fully rendered. | ||
```svelte | ||
<script> | ||
import { Jumper } from 'svelte-loading-spinners'; | ||
import { navigating } from '$app/stores' | ||
</script> | ||
<Jumper size="60" color="#FF3E00" unit="px" duration="1s" /> | ||
{#if $navigating} | ||
<Jumper size="60" color="#FF3E00" unit="px" duration="1s" /> | ||
{/if} | ||
``` | ||
@@ -27,0 +38,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
77
62516
17
46
155
1