svelte-loading-spinners
Advanced tools
Comparing version 0.3.0 to 0.3.1
{ | ||
"name": "svelte-loading-spinners", | ||
"version": "0.3.0", | ||
"version": "0.3.1", | ||
"devDependencies": { | ||
@@ -5,0 +5,0 @@ "@sveltejs/adapter-auto": "next", |
@@ -1,38 +0,65 @@ | ||
# create-svelte | ||
# svelte-loading-spinners | ||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). | ||
> collection of loading spinners with Svelte.js | ||
## Creating a project | ||
## Installation | ||
If you're seeing this, you've probably already done this step. Congrats! | ||
```bash | ||
npm i --save-dev svelte-loading-spinners | ||
``` | ||
or | ||
```bash | ||
# create a new project in the current directory | ||
npm create svelte@latest | ||
yarn add -D svelte-loading-spinners | ||
``` | ||
# create a new project in my-app | ||
npm create svelte@latest my-app | ||
## Usage | ||
```svelte | ||
<Jumper size="60" color="#FF3E00" unit="px" duration="1s"></Jumper> | ||
<script> | ||
import { Jumper } from 'svelte-loading-spinners' | ||
</script> | ||
``` | ||
## Developing | ||
## List of available spinners | ||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: | ||
Props: `size`, `color`, `unit`, `duration` and `pause`. | ||
The default props; `unit` is `px`, `color` is `#FF3E00` and `size` `60px`. | ||
```bash | ||
npm run dev | ||
Notes: | ||
# or start the server and open the app in a new browser tab | ||
npm run dev -- --open | ||
``` | ||
`Circle2` instead of the `color` and `duration` props has `colorOuter`, `colorCenter`, `colorInner`, `durationOuter`, `durationCenter`, `durationInner` props. | ||
## Building | ||
`Circle3` has `ballTopLeft`, `ballTopRight`, `ballBottomLeft` and `ballBottomRight` as props aswell. | ||
To create a production version of your app: | ||
| Loaders | | ||
| -----------: | | ||
| BarLoader | | ||
| Chasing | | ||
| Circle | | ||
| Circle2 | | ||
| Circle3 | | ||
| DoubleBounce | | ||
| Firework | | ||
| Jellyfish | | ||
| Jumper | | ||
| Pulse | | ||
| Rainbow | | ||
| RingLoader | | ||
| ScaleOut | | ||
| Shadow | | ||
| SpinLine | | ||
| Stretch | | ||
| SyncLoader | | ||
| Wave | | ||
| Square | | ||
| Moon | | ||
```bash | ||
npm run build | ||
``` | ||
## Demo | ||
You can preview the production build with `npm run preview`. | ||
List of all spinner: [Demo](https://schum123.github.io/svelte-loading-spinners/) | ||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. | ||
## Development Setup |
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
60466
66
0