{"_id":"@calasanmarko/svelte-loading-animation","name":"@calasanmarko/svelte-loading-animation","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@calasanmarko/svelte-loading-animation","svelte":"src/index.js","module":"dist/index.mjs","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"devDependencies":{"@rollup/plugin-node-resolve":"^9.0.0","rollup":"^2.0.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-svelte":"^6.0.0","svelte":"^3.0.0"},"keywords":["svelte"],"description":"A collection of loading animations component for Svelte","version":"0.0.1","author":{"name":"gayuh tri satria","email":"thetrisatria@gmail.com","url":"https://thetrisatria.com/"},"license":"MIT","_id":"@calasanmarko/svelte-loading-animation@0.0.1","gitHead":"24b2911908818b0a924594b6808136676288d1d6","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-qT/kOUDe6f+CZ6FhquUqNG/fyVK59CaorVT7/VD1ZXGI3vBSlg9JYdiRDVNTeRf4J9Y6zUltI6XE+P0xbogqhg==","shasum":"cd276756a60d5f7c01397c8fd42f4d8e771709a6","tarball":"https://registry.npmjs.org/@calasanmarko/svelte-loading-animation/-/svelte-loading-animation-0.0.1.tgz","fileCount":14,"unpackedSize":70879,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLRNOCQrb0JXrxG3/wv9YQeod6WScfandeiXlDJnEv0AiEAubsd/xvZC2F6wsuayBDVXXpdJ3K4PYnOu04n7uKwEjs="}]},"_npmUser":{"name":"calasanmarko","email":"calasanmarko@hotmail.com"},"directories":{},"maintainers":[{"name":"calasanmarko","email":"calasanmarko@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-loading-animation_0.0.1_1715623551891_0.7621769625759671"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-13T18:05:51.787Z","0.0.1":"2024-05-13T18:05:52.073Z","modified":"2024-05-13T18:05:52.406Z"},"maintainers":[{"name":"calasanmarko","email":"calasanmarko@hotmail.com"}],"description":"A collection of loading animations component for Svelte","keywords":["svelte"],"author":{"name":"gayuh tri satria","email":"thetrisatria@gmail.com","url":"https://thetrisatria.com/"},"license":"MIT","readme":"# svelte-loading-animation\nCollection of simple and light-weight CSS loading animations / spinners for [Svelte](http://svelte.dev).\n\n\n## Available Loading Animations\nCurrently we have 7 loading animations\n| Animation | Component Name | Description |\n| ------ | --- | ---- |\n| Bars | LoadBars | 3 vertical bars animated |\n| Coin | LoadCoin | Flipping / spinning circle |\n| Ellipsis | LoadEllipsis | 3 dots animated |\n| Hour Glass | LoadHourGlass | Simple hour glass animation |\n| Ring | LoadRing | Chasing ring animation |\n| Ripple | LoadRipple | Ripple animation |\n| Spinner | LoadSpinner | Basic spinner |\n\n## Installation\n```sh\nnpm install svelte-loading-animation\n```\n\n## Usage\nFirst you need to import the desired animation(s) on the script section\n```js\n// ...\n\timport { LoadRing, LoadRipple } from 'svelte-loading-animation';\n// ...\n```\nand then use it on your application. Here's some example code:\n```html\n  <LoadRipple />\n\n  <LoadRing />\n```\nBy default, they have Svelte's orange color and 64px*64px size. You can customize the looks by passing available properties.\n\n## Properties\n| Property | Default | Accepted Value |\n| ----- | ----- | ------ |\n| color | #ff3e00 | Any CSS background color |\n| size | 64px | Integer or decimal in px, em, rem |\n\nSome samples with props:\n\n```html\n  <LoadHourGlass size=\"64px\" color=\"#d43ef1\"/>\n  <LoadBars size=\"64px\" color=\"red\"/>\n  <LoadSpinner size=\"5.5rem\" color=\"rgba(0,0,0,.32)\"/>\n```\n\n## License\nMIT\n\n","readmeFilename":"README.md"}