{"id":22725088,"url":"https://github.com/katmore/gpu-loading-overlay","last_synced_at":"2025-10-19T04:44:41.561Z","repository":{"id":58221622,"uuid":"74418160","full_name":"katmore/gpu-loading-overlay","owner":"katmore","description":"A pure css/gpu \"loading spinner\" overlay bundled into a javascript module to conveniently control state.","archived":false,"fork":false,"pushed_at":"2018-02-15T11:46:25.000Z","size":106,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-08T22:55:34.538Z","etag":null,"topics":["gpu","javascript","javascript-library","loading-animations","loading-spinner","loadingoverlay","overlay","vanilla-javascript","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/katmore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-22T00:27:08.000Z","updated_at":"2024-05-01T17:18:59.000Z","dependencies_parsed_at":"2022-08-31T02:01:39.718Z","dependency_job_id":null,"html_url":"https://github.com/katmore/gpu-loading-overlay","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katmore%2Fgpu-loading-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katmore%2Fgpu-loading-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katmore%2Fgpu-loading-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katmore%2Fgpu-loading-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katmore","download_url":"https://codeload.github.com/katmore/gpu-loading-overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228810572,"owners_count":17975596,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["gpu","javascript","javascript-library","loading-animations","loading-spinner","loadingoverlay","overlay","vanilla-javascript","vanilla-js","vanillajs"],"created_at":"2024-12-10T15:08:48.527Z","updated_at":"2025-10-19T04:44:41.445Z","avatar_url":"https://github.com/katmore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GPU Loading Overlay\nA pure css/gpu \"loading spinner\" overlay bundled into a javascript module to conveniently control state.\n\n## Installation\nInstall using Bower or a CDN as described below.\n\n### Install using Bower\n#### Bower Step 1: execute bower shell command:\n```Shell\n$ bower install gpu-loading-overlay --save\n```\n#### Bower Step 2: include script tag pointing your project's bower components path\n```html\n\u003c!-- change './bower_components' to point to your project's bower components path as appropriate--\u003e\n\u003cscript src=\"./bower_components/gpu-loading-overlay/src/loadingOverlay.js\"\u003e\u003c/script\u003e\n```\n\n### Install using CDN\n**Include script tag from rawgit CDN:**\n```html\n\u003c!-- thanks to Ryan Grove for operating https://rawgit.com--\u003e\n\u003cscript src=\"https://cdn.rawgit.com/katmore/gpu-loading-overlay/master/src/loadingOverlay.js\"\u003e\u003c/script\u003e\n```\n(See the [rawgit CDN FAQ](https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions) for more information)\n\n## Usage\n### Methods\n  * {string} loadingOverlay.**activate**() \n  \n     Active the spinner overlay.\n      \n     **Returns:**\n\n      * {string} spin handle\n      \n\n  * {void} loadingOverlay.**cancel**({string} spinHandle)\n  \n       Cancel the specified spinner.\n     \n     **Parameters:**\n\n      * {string} **spinHandle**\n      \n        *Required* spin handle\n        \n  * {void} loadingOverlay.**cancelAll**({string} spinHandle)\n  \n       Cancels all active spinners.\n     \n\n### Examples\n\n#### Example 1) Simple usage:\n\n```javascript\nvar spinHandle = loadingOverlay.activate();\n//\n// do something that takes 5 seconds...\n//\nsetTimeout(function() {\n   loadingOverlay.cancel(spinHandle);\n},5000);\n```\n\n#### Example 2) Why we use 'handles':\n\n**loadingOverlay** provides a 'spin handle' each time the loading overlay is activated so that asyncronous processes\nwill not 'clobber' a subsequently started loading overlay.\n\nMeaning, if the script fires off multiple processes subsequently with corresponding\n*loadingOverlay* \"spin handles\", any of the processes can go ahead and \"cancel\" the overlay without worrying that it\nwill prematurely turn off the spinner meant for another process.\n\nIn the example below, there are two processes. The first process takes longer than the second process, yet the second\nprocess can run the \"cancel\" method without concern of the first process's state.\n\n```javascript\n//\n// do something that takes 5 seconds...\n//\nvar spinHandle_firstProcess = loadingOverlay.activate();\nsetTimeout(function() {\n   loadingOverlay.cancel(spinHandle_firstProcess);\n},5000);\n\n//\n// do something that takes 2 seconds...\n//\nvar spinHandle_secondProcess = loadingOverlay().activate();\nsetTimeout(function() {\n   loadingOverlay.cancel(spinHandle_secondProcess);\n},2000);\n```\n\n#### Example 3) Cancel all handles:\n\nThere may come a time when all active loading spinners should be cancelled regardless of if they have been individually cancelled.\n\nAn example use-case would be upon an unhandled exception:\n\n```javascript\n//\n// prepare an event listener that will \"cancel all spinners\" upon encountering any unhandled javascript error\n//\nwindow.addEventListener('error', function (evt) {\n   loadingOverlay.cancelAll();\n});\n\n//\n// activate a spinner\n//\nvar spinHandle = loadingOverlay.activate();\n\n//\n// do something that takes 5 seconds...\n//\nsetTimeout(function() {\n   loadingOverlay.cancel(spinHandle_secondProcess);\n},5000);\n\n//\n// a wild error appears\n//\nthrow new Error('Some error.');\n```\n\n### Screenshots\n![Demo Screenshot](https://raw.githubusercontent.com/katmore/gpu-loading-overlay/master/demo-screenshot.jpg)\n## Legal\nloadingOverlay is distributed under the terms of the MIT license or the GPLv3 license.\n\nCopyright (c) 2006-2018 Doug Bird.\nAll rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatmore%2Fgpu-loading-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatmore%2Fgpu-loading-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatmore%2Fgpu-loading-overlay/lists"}