{"id":15067520,"url":"https://github.com/codekraft-studio/angular-page-loader","last_synced_at":"2025-10-22T20:40:01.922Z","repository":{"id":57178882,"uuid":"55132799","full_name":"codekraft-studio/angular-page-loader","owner":"codekraft-studio","description":"quick app integration for your favourite loaders","archived":true,"fork":false,"pushed_at":"2018-12-19T11:54:40.000Z","size":275,"stargazers_count":13,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-10T15:48:34.942Z","etag":null,"topics":["angular","ngroute","page-loader","ui-router"],"latest_commit_sha":null,"homepage":"http://www.codekraft.it/demos/angular-page-loader/","language":"HTML","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/codekraft-studio.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}},"created_at":"2016-03-31T08:18:20.000Z","updated_at":"2023-01-28T19:07:46.000Z","dependencies_parsed_at":"2022-09-09T17:11:54.491Z","dependency_job_id":null,"html_url":"https://github.com/codekraft-studio/angular-page-loader","commit_stats":null,"previous_names":["codekraft-studio/angular-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fangular-page-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fangular-page-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fangular-page-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fangular-page-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codekraft-studio","download_url":"https://codeload.github.com/codekraft-studio/angular-page-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235365089,"owners_count":18978297,"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":["angular","ngroute","page-loader","ui-router"],"created_at":"2024-09-25T01:24:35.059Z","updated_at":"2025-10-05T05:30:22.105Z","avatar_url":"https://github.com/codekraft-studio.png","language":"HTML","readme":"# angular-page-loader\nquick app integration for your favourite loaders\n\n### [DEMO](http://www.codekraft.it/demos/angular-page-loader/)\n\n### Getting started\nDownload it via github, npm or via bower:\n\n```bash\nnpm install angular-page-loader\nbower install --save angular-page-loader\n```\n\nOr use it directly from the GitHub CDN:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.rawgit.com/codekraft-studio/angular-page-loader/master/dist/angular-page-loader.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.rawgit.com/codekraft-studio/angular-page-loader/master/dist/angular-page-loader.min.js\"\u003e\u003c/script\u003e\n```\n\nAdd the module name to your application dependencies:\n```javascript\nangular.module('app', ['angular-page-loader'])\n```\n\nAnd optionally add the module directive to your page DOM, inside the body:\n```html\n\u003cbody ng-cloak\u003e\n    \u003cpage-loader\u003e\u003c/page-loader\u003e\n\u003c/body\u003e\n```\n\nAnyway is a best practice to add in your page **head**, as descripted in the Angular documentation, the following style:\n```css\n[ng\\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {\n    display: none !important;\n}\n```\nTo hide all the Angular elements that have **ng-cloack** attribute until the app is loaded, in our case in better to add ng-cloak to the whole body element.\n\n---\n\n### Basic usage\n\n##### with ngRoute:\nIf you **are using** Angular Routes (ngRoute), add the **page-loader** directive and you are ready to go, reload your application and you will see the loader on pages that takes more than **250ms** to load.\n\n##### with ui.router:\nIf you **are using** ui.router, simply add the **page-loader** directive and you are ready to go.\n\n##### without ngRoute or ui.router:\nIf you **are NOT using** Angular Routes (ngRoute) or ui.router you must add a **flag** attribute to the element in order to be able to determine when you want to hide the loader, otherwise it will not show.\nFollow this example:\n\n```html\n\u003cbody ng-cloak\u003e\n    \u003cpage-loader flag=\"isLoading\"\u003e\u003c/page-loader\u003e\n\u003c/body\u003e\n```\n\nAnd in your application:\n```javascript\nangular.module('app')\n.run(function($timeout, $rootScope) {\n\n  // Use a root scope flag to access everywhere in your app\n  $rootScope.isLoading = true;\n\n  // simulate long page loading\n  $timeout(function() {\n\n    // turn \"off\" the flag\n    $rootScope.isLoading = false;\n\n  }, 3000)\n\n})\n```\n\nIf you have some doubt check the example or the index page inside the repository.\n\n---\n\n### Examples\n\n##### How to use a custom loader?\nYou can use any loader you prefer in the module simply by adding it inside the directive element, like in this example:\n**Note:** the loader used in this example is made by [_massimo](http://codepen.io/_massimo/) on codepen and it was taken from [here](http://codepen.io/_massimo/pen/JXELvz).\n\n```html\n\u003cpage-loader\u003e\n    \u003cdiv class=\"pacman\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"dot\"\u003e\u003c/div\u003e\n\u003c/page-loader\u003e\n```\n\n**Obviously** you need to add the related loader CSS style too.\n\n\n##### How to change the page-loader background?\nIf you want to specify a custom background color for the page-loader, add the attribute **bg-color** and pass to it a HEX,RGB or RGBA color code or just a normal color string, like you will do in css.\n```html\n\u003c!-- some examples --\u003e\n\u003cpage-loader bg-color=\"whitesmoke\"\u003e\u003c/page-loader\u003e\n\u003cpage-loader bg-color=\"#7986CB\"\u003e\u003c/page-loader\u003e\n\u003cpage-loader bg-color=\"rgb(160, 25, 120)\"\u003e\u003c/page-loader\u003e\n\u003cpage-loader bg-color=\"rgba(120, 20, 20, 0.8)\"\u003e\u003c/page-loader\u003e\n```\n\n\n##### How to change the page-loader latency time?\nYou can also customize the loader latency using the **latency** attribute, the value is expressed in milliseconds.\n```html\n\u003cpage-loader latency=\"500\"\u003e\u003c/page-loader\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fangular-page-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodekraft-studio%2Fangular-page-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fangular-page-loader/lists"}