{"_id":"@bonosoft/sveltekit-progress","name":"@bonosoft/sveltekit-progress","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bonosoft/sveltekit-progress","description":"Progress component for SvelteKit","version":"0.0.1","author":{"name":"Bonosoft"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bonosoft/sveltekit-progress.git"},"bugs":{"url":"https://github.com/bonosoft/sveltekit-progress/issues"},"keywords":["svelte","sveltekit","progress","percent","dashboard","status","gauge","pressure","circle","circular","rounded","square","donut","risk"],"scripts":{"dev":"vite dev","build":"vite build && npm run package","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","publish":"npm publish --access public"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^3.54.0"},"devDependencies":{"@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.5.0","@sveltejs/package":"^2.0.0","publint":"^0.1.9","svelte":"^3.54.0","svelte-check":"^3.0.1","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.2.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","gitHead":"6edf4f6c68deaf435471e2eeb318a8a7616535ae","homepage":"https://github.com/bonosoft/sveltekit-progress#readme","_id":"@bonosoft/sveltekit-progress@0.0.1","_nodeVersion":"18.14.0","_npmVersion":"9.4.2","dist":{"integrity":"sha512-in63+T19MWhPX8/krHZRtBbP/SWFeh47EqaGDPZE+xo5OTR94o9fGY/7Xbi/UisBwzrwitx8VD3bE4rKgnRHMg==","shasum":"fb555c7e9feb015f56b0b936620ff4918357c4c5","tarball":"https://registry.npmjs.org/@bonosoft/sveltekit-progress/-/sveltekit-progress-0.0.1.tgz","fileCount":8,"unpackedSize":10353,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ0Gykppz+pSKt3WCz94K4Zo3EO3zZsCvs2VHf/3ZG/AiBRE+GMgdhxKYd1TDg348NtfCe0o2kproKU27qqDw8J6Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkITrLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjgw//U6mgxvnUFfyeQzP0PM0Y4wW17f1hJLIAVLyhZs+SriCzv8Mx\r\nlgiNdMpLhPTNehYRCcQmtMgze31DsAdE/+XArCTZCQGrf1HxZ6lEpxo41rYp\r\n9SAM6Rv7kOEHjXmqc2kbqJqPwTih0Kpz04BjgvP40RVCohxP50872IeaMtPo\r\nH7ASkgWeQ5MqshS4bFd8V+wIwsrpb4OSkGapyF9QhxUETc8K5IxQE0wRNODP\r\nhRda/G3aLFAUmQm0nPg+AwxEZOm3Mekw7AwkTXOgjffb8kmXjjhJ4OlawPYV\r\npdLExAYngZqt72QaI6rTBN7iGWaYG1nfDFrf/emPjnpXHKv1SIwzu9C7NmMO\r\nUonbHAhBtJvnoLHvpBlO6uBvomqtF3PxdoYpgq0GaISYy4MunCmUMZKdPogo\r\nAHAi1uKS7CCsYxzZ74/erZSBURKMvNApDJhvOax58W8U62mSe3YFeXLvASXn\r\n0LJPnU3zqNw5R8joAvK2H5R/jNvC3hGoVXQehefYxEdDOaDhd9kNG+FvkqgL\r\njNcuLGrF7pzjj8TioiDv3GfU9TWL5gS9QQyUwk2axifvRbSJ1of6ilXKl1LI\r\nMX2M50fDsV5u0snBwt8/9Y9eeUIJICNXntsonXe1Z7tHHZxA44lnNvdGi6PF\r\nm4DlcwlnkL9xg9q/AiN2+z2H3T05I4T6K/k=\r\n=35i+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bonosoft","email":"bo.n@rgaard.net"},"directories":{},"maintainers":[{"name":"bonosoft","email":"bo.n@rgaard.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sveltekit-progress_0.0.1_1679899339045_0.5301434902346649"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-27T06:42:18.962Z","0.0.1":"2023-03-27T06:42:19.211Z","modified":"2023-03-27T06:42:19.424Z"},"maintainers":[{"name":"bonosoft","email":"bo.n@rgaard.net"}],"description":"Progress component for SvelteKit","homepage":"https://github.com/bonosoft/sveltekit-progress#readme","keywords":["svelte","sveltekit","progress","percent","dashboard","status","gauge","pressure","circle","circular","rounded","square","donut","risk"],"repository":{"type":"git","url":"git+https://github.com/bonosoft/sveltekit-progress.git"},"author":{"name":"Bonosoft"},"bugs":{"url":"https://github.com/bonosoft/sveltekit-progress/issues"},"license":"MIT","readme":"# Progress circle for SvelteKit\nWith this module, you are able to add circular or square progress bars to you Sveltekit site. \n\n## Install\nUse your package manager to install the module:\n```shell\nnpm install @bonosoft/sveltekit-progress\n```\n\n## Adding Progress to a svelte file in SvelteKit\nNow you can start adding circular progress components to your pages.\n```ts\n<script lang=\"ts\">\n\timport Progress from \"@bonosoft/sveltekit-progress\"\n</script>\n\n<Progress progress=\"50\"/>\n```\nThe standard progress bar can be modefied by adding different parameters.\n\n# Sample code\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style1.png?raw=true)\n```ts\n<Progress progress=\"0\"/>\n<Progress progress=\"25\"/>\n<Progress progress=\"50\"/>\n<Progress progress=\"75\"/>\n<Progress progress=\"100\"/>\n```\nParameter progress is use to set the shown progress.\n\n## Front, back and border colors, for use in dark mode\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style2.png?raw=true)\n\n```ts\n<Progress progress=\"0\"   textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"25\"  textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"50\"  textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"75\"  textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"100\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n\n<Progress progress=\"30\" color=\"#29F\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"40\" color=\"#2F2\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"50\" color=\"#F92\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"60\" color=\"#F22\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n<Progress progress=\"70\" color=\"#92F\" textColor=\"#eee\" bgcolor=\"#111\" borderColor=\"#333\"/>\n```\nWith parameters for color, textcolor, bgcolor and bordercolor, you are able to style the color of the progress bar, the text inside, the background inside and the rest part of the progress area.\n\n## Front, back and border colors\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style3.png?raw=true)\n```ts\n<Progress progress=\"30\" color=\"#29F\" textColor=\"#29F\"/>\n<Progress progress=\"40\" textColor=\"#F22\"/>\n<Progress progress=\"50\" textColor=\"#29F\" labelText=\"Online\"/>\n<Progress progress=\"60\" labelText=\"Backup\"/>\n<Progress progress=\"70\" textColor=\"#292\" borderColor=\"#F22\"/>\n```\nHere are samples of different colors for progress, text and the area between progress and 100%. The samples also shows how to add an extra text label.\n\n## Size\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style4.png?raw=true)\n```ts\n<Progress progress=0 size=30/>\n<Progress progress=25 size=50/>\n<Progress progress=50 size=70/>\n<Progress progress=75 size=90/>\n<Progress progress=100 size=110/>\n```\nWith the size parameter, you are able to control the size of the progress bar.\n\n## Border width\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style5.png?raw=true)\n```ts\n<Progress progress=0 borderWeight=\"1\"/>\n<Progress progress=25 borderWeight=\"3\"/>\n<Progress progress=50 borderWeight=\"8\"/>\n<Progress progress=75 borderWeight=\"15\"/>\n<Progress progress=100 borderWeight=\"20\"/>\n```\nThis borderWeight controls the width of the progress bar, so you are able to make thin or really thick bars.\n\n## Border radius\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c0bd0533f7766ad54eca52ef3121d0d657d8b2be/readme/style6.png?raw=true)\n```ts\n<Progress progress=12.5 borderRadius=0/>\n<Progress progress=25 borderRadius=15/>\n<Progress progress=50 borderRadius=30/>\n<Progress progress=85 borderRadius=40/>\n<Progress progress=100 borderRadius=50/>\n```\nDon't like the clasic circle design, change the borderRadius to get a square or rounded square.\n\n## Showing you own center content\n![Progress circles](https://github.com/bonosoft/sveltekit-progress/blob/c849398c291e6c8df53143d41401059109812850/readme/style7.png?raw=true)\n```ts\n<Progress size=\"150\" progress=\"50\" customContent=false>\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\"> <path.../> </svg>\n</Progress>  \n\n<Progress size=\"150\" progress=\"50\" customContent=\"true\">\n Text\n</Progress>  \n\n<Progress size=\"150\" progress=\"50\" customContent=\"true\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 384 512\"><path.../></svg>\n</Progress>  \n```\nWant to add special content to the progress circel, just add it inside the Progress module tag. With the customContent parameter you can hide the default content, to provide more space for your content.","readmeFilename":"README.md"}