schum123 / svelte-loading-spinners Goto Github PK
View Code? Open in Web Editor NEWA collection of loading spinner components for SvelteJs
Home Page: https://schum123.github.io/svelte-loading-spinners/
License: MIT License
A collection of loading spinner components for SvelteJs
Home Page: https://schum123.github.io/svelte-loading-spinners/
License: MIT License
Does anyone use the package "svelte-loading-spinners": 0.1.1 from https://www.npmjs.com/package/svelte-loading-spinners?
It seems not to work. Even if it is published 3 month ago, some of the newer components are not included in the package (e.g. Moon, Square)
The example available in this repository includes the components directly from source code, not from the npm package. BTW, the bundle files are committed to the repository here. But when I build the example again, it tells me that the components Moon & Square are not defined...
First of all thank you very much for this nice collection of spinners, saved a lot of work for me! :)
I just tried different spinners in my project, and the diamonds-spinner seems to be broken: it is just one pulsing diamond visible. I tried to inspect the spinner and it seems like all three diamonds are pulsing on the same spot, resulting in the horizontal motion not being visible. That's just my guess, so this might not be the reason.
As Barloader are supposed to be a lengthy element. Adding a width
or length
property in Barloader would be awesome.
It would be really useful to be able to pause or halt the animation - say if I wanted to show an error state.
Could be done by conditionally setting animation-play-state to paused.
Getting this warning for [email protected]:
[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.
Hi,
there is a problem in loading Jumper component in safari, when I remove border-radius It'll appear, but with border-radius, It won't work on safari, but other browsers work fine
Hi,
First of all thank you for the nice loading spinners!
However, coming to the issue, the PLANE spinner is not scaling. It only scales when I add unit="". Otherwise, only the container around the loading spinner is adapting to the size (so the div with the wrapper class), but the spinner itself keeps the default size and is attached to the top left corner of the container.
Would be very nice, if you could help.
When changing the size property of a Shadow spinner the font-size has to be changed as well
Otherwise resulting in the dots being too large/small.
Just change the font-size to the size property and then it works
I get this error when running "vite build" in my SvelteKit project.
Can someone help me out?
<select id="category" name="category" on:change={handleInput}>
{#await fetchCategories()}
{#if loading}
<Jumper />
{/if}
{:then}
{#each categories as category}
<option
name="category"
value={// get category id of selected category\
category.id}
>
{category.name}</option
>
{/each}
{loading === false}
{/await}
When referencing this component in a svelte app and running svelte-check
the following is reported:
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Circle.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\DoubleBounce.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\ScaleOut.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\SpinLine.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Stretch.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\BarLoader.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { calculateRgba, range } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Jumper.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\RingLoader.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\SyncLoader.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Rainbow.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Wave.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Firework.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Pulse.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Jellyfish.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { range, durationUnitRegex } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Chasing.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { durationUnitRegex, range } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Shadow.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Square.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Moon.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Plane.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
import { calculateRgba } from "./utils";
[ProjectDir]\node_modules\svelte-loading-spinners\dist\ts\Diamonds.svelte:2:37
Error: Cannot find module '../src/types/spinner.type' or its corresponding type declarations. (ts)
<script lang="ts">
import type { SpinnerTypes } from "../src/types/spinner.type";
export let color: SpinnerTypes["color"] = "#FF3E00";
vite-plugin-svelte
tells me that +
and -
must be surrounded by whitespaces in Barloader.svelte
line 31
:
calc((var(--duration)+0.1) / 2)
^
Using string here is misleading, tried replacing "px" with "%" and it doesn't work out the box.
Svelte 5 with the vite-plugin-svelte] shows the below warnings.
More info: sveltejs/svelte#11052
Workaround: run the command:
npx svelte-migrate self-closing-tags
in the folder: node_modules/svelte-loading-spinners
[vite-plugin-svelte] node_modules/svelte-loading-spinners/ArrowDown.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/ArrowUp.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/BarLoader.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Chasing.svelte:14:3 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Circle.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Circle2.svelte:13:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Clock.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Diamonds.svelte:12:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Diamonds.svelte:13:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Diamonds.svelte:14:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/DoubleBounce.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Firework.svelte:9:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/GoogleSpin.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Jellyfish.svelte:18:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Jumper.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Moon.svelte:15:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Moon.svelte:16:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Plane.svelte:17:3 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Plane.svelte:20:3 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Plane.svelte:23:3 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Puff.svelte:18:2 Self-closing HTML tags for non-void elements are ambiguous — use `<span ...></span>` rather than `<span ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Pulse.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Rainbow.svelte:9:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/RingLoader.svelte:11:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/ScaleOut.svelte:12:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Shadow.svelte:9:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/SpinLine.svelte:13:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Square.svelte:8:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Stretch.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/SyncLoader.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
[vite-plugin-svelte] node_modules/svelte-loading-spinners/Wave.svelte:13:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
Hello! Im getting the following error while I trying to use svelte-loading-spinners:
Error: <Shadow> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
at Proxy.validate_component (/home/username/Documents/Svelte/node_modules/svelte/internal/index.js:1532:15)
at eval (/src/components/Sidebar.svelte:45:59)
at Object.$$render (/home/username/Documents/Svelte/node_modules/svelte/internal/index.js:1555:22)
at eval (/home/username/Documents/Svelte/src/routes/__layout.svelte:33:87)
at Object.$$render (/home/username/Documents/Svelte/node_modules/svelte/internal/index.js:1555:22)
at root.svelte:36:44
at $$render (/home/username/Documents/Svelte/node_modules/svelte/internal/index.js:1555:22)
at Object.render (/home/username/Documents/Svelte/node_modules/svelte/internal/index.js:1563:26)
at render_response (file:///home/username/Documents/Svelte/node_modules/@sveltejs/kit/dist/ssr.js:377:28)
at runMicrotasks (<anonymous>)
Firefox 91.0.2 on Ubuntu 20.04
I'm not sure if this is something that you can work around (well, I am sure you can do things like keyframe 99.99999%
😄 ). It appears Firefox will briefly mess up a single frame and render inconsistent styles. If you watch closely you will sometimes (not for every loop) see a big circle with opacity: 1
Watch both videos (4s and 10s) and you should see what I mean
https://user-images.githubusercontent.com/679144/131342332-dc2637cd-27f0-4442-be6b-4399582dfb9c.mp4
https://user-images.githubusercontent.com/679144/131342328-175cef8f-c4f0-4647-a440-57e61ec09092.mp4
Good library! Would be great if it has some type definitions. Here's an example of how people added those for svelte-material-ui.
By the way, it's also a good idea to make this library TypeScript first. It can be achieved by changing rollup config and adding some simple types to the code:
export let size: number = 60;
export let color: string = "#FF3E00";
export let unit: string = "px";
Using SvelteKit with Typescript, and I received the error in the title immediately upon importing the Circle.
This fixed it: hperrin/svelte-material-ui#375 (comment)
Nice lib, thanks.
Suggestion though, no need to use emotion lib, svelte has everything that's needed:
<script>
import {range} from './utils';
export let size = 60;
export let color = '#FFFFFF';
export let unit = 'px';
</script>
<style>
.wrapper {
height: var(--size);
width: var(--size);
display: flex;
align-items: center;
justify-content: center;
}
.dot {
height: var(--dotSize);
width: var(--dotSize);
background-color: var(--color);
margin: 2px;
display: inline-block;
border-radius: 100%;
animation: sync 0.6s ease-in-out infinite alternate both running;
}
@keyframes sync {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
</style>
<div class="wrapper" style="--size:{size}{unit}">
{#each range(1, 3) as i}
<div class="dot" style="--dotSize:{size * 0.25}{unit}; --color:{color}; animation-delay: {i * 0.1}s;" />
{/each}
</div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.