schum123 / svelte-loading-spinners Goto Github PK

View Code? Open in Web Editor NEW

498.0 498.0 35.0 719 KB

A collection of loading spinner components for SvelteJs

Home Page: https://schum123.github.io/svelte-loading-spinners/

License: MIT License

JavaScript 1.52% HTML 0.52% Svelte 91.82% TypeScript 6.14%

svelte-loading-spinners's People

Contributors

Stargazers

Watchers

svelte-loading-spinners's Issues

Drop 3rd party libraries

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>

Clock, Diamonds and Circle don't get colors applied properly

Of course there are some others that aren't but those are multicolored so it is more reasonable. Clock, Diamonds, and Circle are monochromatic so I can't see any conceivable reason why they aren't getting colored

Jumper problem with safari

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

Why it dont work?

	<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}

Failed to resolve import "./Circle.svelte"

I npm i --save-dev svelte-loading-spinners

then I put this in <script> in my Main.svelte:
import { Jumper } from 'svelte-loading-spinners/'

and I get this error:

am i doing something wrong?

It seems that the publish format is incorrect in v0.3.5

The following error occurs in v0.3.5.

It appears that the toolchain for this library is out of date and the package needs to be published using the following procedure.

npm run build && cd package && npm publish

Using the svelte field in package.json to point at .svelte source files is deprecated

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.

Easy fix

Can each spinner type get a unique class name?

Is NPM Package working?

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...

Changing size prop in Shadow Component

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

Rendering issues in Firefox with Jumper and ScaleOut

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

CSS calc: `+` and `-` must be surrounded by whitespaces

vite-plugin-svelte tells me that + and - must be surrounded by whitespaces in Barloader.svelte line 31:

calc((var(--duration)+0.1) / 2)
                     ^

Diamonds-spinner seems broken

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.

diamonds.mp4

SyncLoader does not scale correctly

Hey. I tried using the spinner as inline, but had to realize it doesn't scale correctly for small sizes.

16px	64px
Notice the stretched dots at 16px.	At 64px, the spinner looks good.

import error: process is not defined

Hi,

import { Jumper } from 'svelte-loading-spinners'

i add import code to my page i get this error on console.

How can i solve this problem?
thanks.

How about adding a length property in Barloader?

As Barloader are supposed to be a lengthy element. Adding a width or length property in Barloader would be awesome.

Error of Unknown file extension ".svelte" in SvelteKit

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)

Plane Spinner is not scaling

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.

`svelte-check` fails when consuming library

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";

[commonjs--resolver] Missing "./dist/ts/Circle.svelte" specifier in "svelte-loading-spinners" package

I get this error when running "vite build" in my SvelteKit project.

Can someone help me out?

Feature Request: Add the ability to pause or halt the animation

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.

Error: <Shadow> is not a valid SSR component.

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>)

issue with circle2 and size

I tried

<Circle2 size="35" color="#FF3E00" unit="px" />

result

removing size:

Also the color attr deosn't change anything

Add TypeScript support

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";

schum123 / svelte-loading-spinners Goto Github PK

svelte-loading-spinners's People

Contributors

Stargazers

Watchers

Forkers

svelte-loading-spinners's Issues

Recommend Projects

Recommend Topics

Recommend Org