{"id":13425657,"url":"https://github.com/peachananr/loading-bar","last_synced_at":"2025-10-22T16:16:30.205Z","repository":{"id":10162834,"uuid":"12244027","full_name":"peachananr/loading-bar","owner":"peachananr","description":"Add a Youtube-like loading bar to all your ajax links","archived":false,"fork":false,"pushed_at":"2020-05-08T01:24:04.000Z","size":14,"stargazers_count":660,"open_issues_count":2,"forks_count":128,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-03-01T04:11:10.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://peachananr.github.io/loading-bar/demo.html","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/peachananr.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":"2013-08-20T13:41:46.000Z","updated_at":"2024-11-19T00:07:40.000Z","dependencies_parsed_at":"2022-08-30T11:11:42.993Z","dependency_job_id":null,"html_url":"https://github.com/peachananr/loading-bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Floading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Floading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Floading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Floading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peachananr","download_url":"https://codeload.github.com/peachananr/loading-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243790950,"owners_count":20348378,"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":[],"created_at":"2024-07-31T00:01:16.287Z","updated_at":"2025-10-22T16:16:30.122Z","avatar_url":"https://github.com/peachananr.png","language":"HTML","readme":"#Loading Bar by Pete R.\nA little jQuery plugin that will let you add a Youtube-like loading bar to all your ajax links \nCreated by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)\n\nLicense: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US)\n\n\n## Demo\n[View demo](http://peachananr.github.io/loading-bar/demo.html)\n\n## Usage\nTo add a Youtube-like loading bar to your website, simply include the latest jQuery library found [here](http://jquery.com/download/) together with `jquery.loadingbar.js` and `loadingbar.css` into your document's `\u003chead\u003e` and simply call the function as shown below:\n  \n````javascript\n$(\".ajax-call\").loadingbar({\n  replaceURL: false, /* You can visibly change the URL of the browser to reflect the clicked links by toggling this to true. Default is false. May not work in old browsers. */\n\ttarget: \"#loadingbar-frame\", /* The container's selector where you want the ajax result to appear. Default is #loadingbar-frame */\n\tdirection: \"right\", /* The direction where the the loading bar will progress. Default is right. */\n\t\n\t/* Default Ajax Parameters.  */\n\tasync: true, \n\tcomplete: function(xhr, text) {},\n\tcache: true,\n\terror: function(xhr, text, e) {},\n\tglobal: true,\n\theaders: {},\n\tstatusCode: {},\n\tsuccess: function(data, text, xhr) {},\n\tdataType: \"html\",\n\tdone: function(data) {}\n});\n````\nNote: For options listed under Default Ajax Parameters, simply refer to [jQuery.ajax doc](http://api.jquery.com/jQuery.ajax/) for more info. \n\nFor HTML markups, all you need is a link and a container to show the result:\n  \n````html\n\u003ca href=\"YOUR-URL\" class=\"ajax-call\"\u003e..\u003c/a\u003e\n\u003cdiv id=\"loadingbar-frame\"\u003e\u003c/div\u003e\n````\nMake sure you change the \"YOUR-URL\" into the URL you want the script to load. \n\n\n## Further Customization\nSometime you may want each links to have its own ajax command, for example one for `POST` and another for `GET`. With this script you can do this by simply following markup rules as shown in the example below:\n\n````html\n\u003ca href=\"http://api.dribbble.com/players/jackietrananh/shots?callback=?\" \ndata-datatype=\"json\" data-type=\"GET\" data-target=\"#frame\"\u003eClick Me\u003c/a\u003e\n````\nThis example shows how I was able to call the Dribbble's API with a data markup. Simply assign `data-target` with a selector to define the target container, `data-type` to define the type of ajax call you want and `data-datatype` to define the type you want to receive. \n\nNow, each individual links will perform using its own settings.\n\n## Other Resources\n- Tutorial (Coming Soon)\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeachananr%2Floading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeachananr%2Floading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeachananr%2Floading-bar/lists"}