{"id":32225586,"url":"https://github.com/jagjitgill/svg-loading","last_synced_at":"2026-02-19T23:01:56.309Z","repository":{"id":58229796,"uuid":"91931424","full_name":"jagjitgill/svg-loading","owner":"jagjitgill","description":"SVG loading animation library","archived":false,"fork":false,"pushed_at":"2017-08-25T20:07:55.000Z","size":2564,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-23T02:36:17.520Z","etag":null,"topics":["animation","circle","circular","infinity","loading","loading-spinner","svg"],"latest_commit_sha":null,"homepage":"https://jagjitgill.github.io/svg-loading/","language":"HTML","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/jagjitgill.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":"2017-05-21T03:43:24.000Z","updated_at":"2025-12-02T07:43:09.000Z","dependencies_parsed_at":"2022-08-31T09:21:32.038Z","dependency_job_id":null,"html_url":"https://github.com/jagjitgill/svg-loading","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jagjitgill/svg-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagjitgill%2Fsvg-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagjitgill%2Fsvg-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagjitgill%2Fsvg-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagjitgill%2Fsvg-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jagjitgill","download_url":"https://codeload.github.com/jagjitgill/svg-loading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagjitgill%2Fsvg-loading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29636040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T22:32:43.237Z","status":"ssl_error","status_checked_at":"2026-02-19T22:32:38.330Z","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":["animation","circle","circular","infinity","loading","loading-spinner","svg"],"created_at":"2025-10-22T09:32:02.396Z","updated_at":"2026-02-19T23:01:56.304Z","avatar_url":"https://github.com/jagjitgill.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Loading Animation\nSVG based customizable loading animation.\n[View demo](http://jagjitgill.ca/code/svg-loading/)\n\n## Install\nDownload zip from the [GitHub repo][svg-loading] or install via bower, a [client-side code package manager][bower].\n```bash\nbower install svg-loading\n# bower install https://github.com/jagjitgill/svg-loading.git#master\n```\n\nInclude the required css and the js files:\n```html\n\u003clink href=\"bower_components/svg-loading/dist/svg-loading.css\" rel=\"stylesheet\"\u003e\u003c/link\u003e\n\n\u003cscript src=\"bower_components/svg-loading/dist/segment.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/svg-loading/dist/svg-loading.min.js\"\u003e\u003c/script\u003e\n```\n\n### JS\nBy default the `\u003cbutton\u003e` and `\u003ca\u003e` will start the animation on click. All the other containers (`\u003cp\u003e`, `\u003cdiv\u003e` etc.) will start the animation upon initialization.\nInitialize the animation:\n```js\n$(function(){\n    // Initialize\n    var circularLoading = initializeLoading('.my-class');\n\n    // Stop animation\n    circularLoading.triggerSuccess();           // Stop with tick mark\n    circularLoading.triggerFail();              // Stop with \"x\"\n    circularLoading.triggerSilentSuccess();     // Fade away\n});\n```\n### Options\n#### Status text\n1) Via `data` attributes.\n\n```html\n\u003cbutton class=\"demo-button\"\n        data-progress=\"Sending\"\n        data-success=\"Done!\"\n        data-fail=\"Error!\"\n        data-reset=\"Send\"\u003e\n        Send\n\u003c/button\u003e\n```\n2) Via js _(Only success and fail)_\n```javascript\ncircularLoading.triggerSuccess('Action successful');\ncircularLoading.triggerFail('Action failed');\n```\n\n**Position**\nThe animation can be added on `left`, `right`, `top` or `bottom` of the element. The default value is 'right'. Specific position settings can be passed during initialization. (Use `inline` for paragraphs and divs)\n\n```javascript\nvar loading = initializeLoading('.my-class', { position: 'bottom' });\n```\n\n**Type**\nChoose one from 3 available types: `circular`, `circle` and `infinity`. The default value is 'circular'.\n\n```javascript\nvar loading = initializeLoading('.my-class', { type: 'circle' });\n```\n\n**Scale (Inline only)**\nAvailable options: `x1-5`, `x2`, `x2-5` ... `x4`.\n\n```javascript\nvar loading = initializeLoading('.my-class', { scale: 'x2' });\n```\n\n## About\nThis library is made using [segment](https://lmgonzalves.github.io/segment/) and [classie](https://github.com/desandro/classie). Feel free to use the source code as an example or in any project of your own. \nFound a bug? or an enhancement idea?  Let's _git_ on it.\nInspired by [lmgonzalves](https://x-team.com/blog/creating-loading-buttons-svg-segment/).\n\n![Loading gif](/demo-svg-loading.gif?raw=true)\n\n[svg-loading]: https://github.com/jagjitgill/svg-loading\n[bower]: http://bower.io/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagjitgill%2Fsvg-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjagjitgill%2Fsvg-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagjitgill%2Fsvg-loading/lists"}