{"id":25518650,"url":"https://github.com/sxxov/pawe","last_synced_at":"2026-02-19T17:01:38.880Z","repository":{"id":257540067,"uuid":"851708763","full_name":"sxxov/pawe","owner":"sxxov","description":"pawe — An automatic web progress bar.","archived":false,"fork":false,"pushed_at":"2024-11-22T13:34:14.000Z","size":808,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T19:04:28.609Z","etag":null,"topics":["loading","loading-animation","loading-bar","loading-indicator","pace","progress-bar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sxxov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-03T15:22:35.000Z","updated_at":"2024-11-22T13:34:18.000Z","dependencies_parsed_at":"2024-09-17T09:27:56.056Z","dependency_job_id":"accb3597-db90-4844-9cce-510dc2e922ad","html_url":"https://github.com/sxxov/pawe","commit_stats":null,"previous_names":["sxxov/pawe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sxxov/pawe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sxxov%2Fpawe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sxxov%2Fpawe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sxxov%2Fpawe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sxxov%2Fpawe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sxxov","download_url":"https://codeload.github.com/sxxov/pawe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sxxov%2Fpawe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29623546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T13:04:20.082Z","status":"ssl_error","status_checked_at":"2026-02-19T13:03:33.775Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading","loading-animation","loading-bar","loading-indicator","pace","progress-bar"],"created_at":"2025-02-19T16:54:08.237Z","updated_at":"2026-02-19T17:01:38.853Z","avatar_url":"https://github.com/sxxov.png","language":"TypeScript","readme":"# `pawe`\n\nAn automatic web progress bar. Inspired by [`pace`](https://github.com/CodeByZach/pace).\n\n## Installation\n\n### Via NPM\n\n\u003e \u003csup\u003eIf you're using a framework like React, that comes with a build system.\u003c/sup\u003e\n\nRun this command in your terminal:\n\n```bash\nnpm i pawe\n```\n\nThen, add this in your layout (e.g. `layout.tsx`, `+layout.svelte`, etc.)\n\n```js\nimport 'pawe';\n```\n\n### Via CDN\n\n\u003e \u003csup\u003eIf you want to use \u003ccode\u003epawe\u003c/code\u003e directly in the browser.\u003c/sup\u003e\n\nInclude this in the `\u003chead\u003e` of your HTML:\n\n```html\n\u003cscript\n\ttype=\"module\"\n\tsrc=\"https://cdn.jsdelivr.net/npm/pawe\"\n\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Automatic Mode\n\nThis is the **default mode**. This means `pawe` will automatically start monitoring the page load progress \u0026 expose the values as HTML attributes \u0026 CSS custom properties.\n\n#### Example\n\nA basic progress bar.\n\n```html\n\u003cstyle\u003e\n\t/* 1. using CSS custom properties for values */\n\t#progress {\n\t\t/* progress bar */\n\t\twidth: var(--pawe-bar-percent, 0%);\n\t\tbackground: hsl(0 0% 0%);\n\n\t\tposition: fixed;\n\t\theight: 2px;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransition:\n\t\t\twidth 1s ease-out,\n\t\t\topacity 1s;\n\n\t\t/* progress text (i.e. '100%') */\n\t\t\u0026::after {\n\t\t\tcontent: var(--pawe-bar-percent-string) '%';\n\t\t}\n\t}\n\n\t/* 2. using HTML attributes for state changes */\n\t:root[data-pawe='idle'] #progress {\n\t\topacity: 0;\n\t}\n\u003c/style\u003e\n\n\u003cdiv id=\"progress\"\u003e\u003c/div\u003e\n```\n\n#### HTML API\n\nHere are all the exposed values in HTML/CSS that you can use:\n\n##### HTML Attributes\n\n| Attribute   | Element            | Type                | Description                  |\n| ----------- | ------------------ | ------------------- | ---------------------------- |\n| `data-pawe` | `:root` (`\u003chtml\u003e`) | `idle` \\| `loading` | The current state of `pawe`. |\n\n##### CSS Custom Properties\n\n| Property                         | Range            | Description                                                                                                                                                                                                                                                |\n| -------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `--pawe-bar`                     | `0` to `1`       | The augmented progress of the page load that approximates the loading in between down time of collected data points.\u003cbr\u003e\u003cbr\u003eUsers generally prefer this as it provides feedback even if their connections are spotty, causing data to come down in bursts. |\n| `--pawe-bar-percent`             | `0%` to `100%`   | '', in percent.                                                                                                                                                                                                                                            |\n| `--pawe-bar-percent-int`         | `0` to `100`     | '', floored, without unit.                                                                                                                                                                                                                                 |\n| `--pawe-bar-percent-string`      | `'0'` to `'100'` | '', in string type, for use with the `content` property.                                                                                                                                                                                                   |\n| `--pawe-progress`                | `0` to `1`       | The objective progress of the page load solely based on the collected data points.                                                                                                                                                                         |\n| `--pawe-progress-percent`        | `0%` to `100%`   | '', in percent.                                                                                                                                                                                                                                            |\n| `--pawe-progress-percent-int`    | `0` to `100`     | '', floored, without unit.                                                                                                                                                                                                                                 |\n| `--pawe-progress-percent-string` | `'0'` to `'100'` | '', in string type, for use with the `content` property.                                                                                                                                                                                                   |\n\n#### JavaScript API\n\nYou can also use the JavaScript API to get the progress values programmatically.\n\nFor the full list of available exports, see the [`index.ts`](https://github.com/sxxov/pawe/blob/main/src/index.ts) file.\n\n\u003e \u003csup\u003eBetter docs are coming soon™!\u003c/sup\u003e\n\n##### Example\n\n```js\nimport { bar } from 'pawe';\n\nconst unsubscribe = bar.subscribe(($bar) =\u003e {\n\t// this is equivalent to `--pawe-bar`\n\tconsole.log(`bar: ${$bar}`);\n});\n```\n\n### Manual Mode (Advanced)\n\nYou can also use `pawe` in manual mode by importing from `pawe/api`. This means you are in charge of starting the monitoring \u0026 scaffolding any other load signals you want to track.\n\n#### Example: Adding Loads \u0026 Reading Progress from the Global Store\n\n```js\n// note the different import!\n// * `pawe` \t- automatic mode\n//\t\t\t\t  monitoring is started automatically\n// * `pawe/api`\t- manual mode\n//\t\t\t\t  only the api is exposed \u0026 no side effects are ran\nimport { monitorDOM, createLoad, progress } from 'pawe/api';\n\n// log the progress values as we add loads\nconst unsubscribe = progress.subscribe(($progress) =\u003e {\n\tconsole.log(`progress: ${$progress}`);\n});\n\n// add monitoring of the DOM (skipping the rest)\nmonitorDOM();\n\n// add your own load signal to the calculated progress\nconst load = createLoad();\nconsole.log('starting load...');\nconsole.log('loaded: 0%');\n\n// simulate loading\nload.set(0.5);\nconsole.log('loaded: 50%');\n\n// mark as finished after 1 second\nsetTimeout(() =\u003e {\n\tload.finish();\n\t// or\n\t// `load.set(1)`\n}, 1000);\n\n// the load acts as a promise that will resolve when it hits `1`\nawait load;\nconsole.log('loaded: 100%');\n```\n\n#### Example: Creating a Local Progress Bar\n\n```js\n// note the different import!\n// * `pawe` \t- automatic mode\n//\t\t\t\t  monitoring is started automatically\n// * `pawe/api`\t- manual mode\n//\t\t\t\t  only the api is exposed \u0026 no side effects are ran\nimport { createPool, createLoad, createProgress, createBar } from 'pawe/api';\n\n// where all the loads are stored\nconst pool = createPool();\n\n// create a load signal\nconst load = createLoad(pool);\n//                      ^^^^\n//                      note that `pool` is passed as the first argument!\n//                      this is so that the load signal is added to our pool\n//                      instead of the global one\n\n// create a progress signal\nconst progress = createProgress(pool);\n// create a progress bar (for UI)\nconst bar = createBar(progress);\n\n// use the progress values\nconst unsubscribeProgress = progress.subscribe(($progress) =\u003e {\n\tconsole.log(`progress: ${$progress}`);\n});\nconst unsubscribeBar = bar.subscribe(($bar) =\u003e {\n\tconsole.log(`bar: ${$bar}`);\n});\n```\n\n## Bypassing AJAX Requests\n\nIf you want to bypass AJAX requests from being tracked by `pawe`, you can pass in the non-standard `pawe` property. It will be removed from the final config/instance before being sent.\n\n### `fetch`\n\n```js\nconst resp = await fetch('https://example.com', {\n\tpawe: 'bypass', // add this to bypass tracking\n});\n```\n\n### `XMLHttpRequest`\n\n```js\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://example.com');\nxhr.pawe = 'bypass'; // add this to bypass tracking\nxhr.send();\n```\n\n### TypeScript Support\n\nInclude the following in your `tsconfig.json` to get type hints for the above mentioned `pawe` property.\n\n```json\n{\n\t\"compilerOptions\": {\n\t\t\"types\": [\"pawe/client\"]\n\t}\n}\n```\n\n## Data Sources\n\n-   `DOM` - Track load events from DOM elements that are statically \u0026 dynamically added to the page\n    -   `document.readyState` until `complete`\n    -   `\u003cimg\u003e` load (both eager \u0026 lazy)\n    -   `\u003cvideo\u003e` load (when it starts loading until it's ready to play)\n    -   `\u003caudio\u003e` load (when it starts loading until it's ready to play)\n    -   `\u003ciframe\u003e` load\n    -   `\u003cobject\u003e` load\n    -   `\u003cembed\u003e` load\n-   `fetch` - Track data stream from `fetch` requests\n-   `XMLHttpRequest` - Track `progress` events from `XMLHttpRequest`s\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsxxov%2Fpawe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsxxov%2Fpawe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsxxov%2Fpawe/lists"}