{"id":18798556,"url":"https://github.com/micmro/svg-spinner","last_synced_at":"2026-01-02T01:30:14.924Z","repository":{"id":24120271,"uuid":"27508666","full_name":"micmro/svg-spinner","owner":"micmro","description":"Themeable SVG loading spinner using CSS animation.","archived":false,"fork":false,"pushed_at":"2015-03-16T12:17:25.000Z","size":186,"stargazers_count":6,"open_issues_count":0,"forks_count":6,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-12-29T18:21:02.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/micmro.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":"2014-12-03T21:31:53.000Z","updated_at":"2024-12-27T03:07:31.000Z","dependencies_parsed_at":"2022-08-22T11:10:19.525Z","dependency_job_id":null,"html_url":"https://github.com/micmro/svg-spinner","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/micmro%2Fsvg-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fsvg-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fsvg-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micmro%2Fsvg-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micmro","download_url":"https://codeload.github.com/micmro/svg-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239727055,"owners_count":19687099,"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-11-07T22:12:21.988Z","updated_at":"2026-01-02T01:30:14.872Z","avatar_url":"https://github.com/micmro.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Themeable and cachable animated SVG loading spinner\n===================================================\n\nIt is only downloads one version of the SVG, stores in localStorage (when available), and colours it based on the `data-colour` attribute in the holder element. This way the browser only requests the spinner once (the one used here is 2.2kb gzip, including the CSS animation).\n\nIt still needs some JS for feature detection, fetch the SVG, inject the colour informantions and for the non-css-transformation fallback. I've used jQuery here, since I use it in most projects, but you can easily switch it to vanilla JavaScript.\n\n```\n\u003cdiv class=\"load-spinner\" data-colour=\"#fdbc33\" data-fallback-class=\"no-svg-fallback-orange\"\u003e\u003c/div\u003e\n```\n\nBrowser Support\n---------------\nTested in: IE8\\*\\*, IE9\\*, IE10, IE11, FF 33, Chrome 38, Opera 26, Safari 6.1, Safari 8, Android 4, Android 4.4, iOS 8\n\n\n\\* Spinner falls back to JS animation as fallback for [browser, like IE9, that don't support CSS animation](http://caniuse.com/#feat=css-animation) - update this animation if you use a differnt style.\n\n\\*\\* Spinner falls back to gif in IE8 and other [browsers that don't support SVG](http://caniuse.com/#feat=svg) and/or the object tag.\n\nChanging the colour\n-------------------\nChange the `data-colour=\"#fdbc33\"` attribute and update `data-fallback-class=\"no-svg-fallback-orange\"` to switch the class IE8 uses as a fallback.\n\nReason for this approach\n-------------------------\nAn inline `svg` tag is not beeing cached seperatly, an SVG in an `img` tag can only be animated with [SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) and that's [not supported in IE yet](http://caniuse.com/#feat=svg-smil).\n\nSo I [initially](https://github.com/nurun/svg-spinner/tree/10072e371ad4344f49fc9d38cedbd2cf8abbfdc6) used the `object` tag to load the SVG, which was nice, since it was fully self contained (including CSS and JS), but unfortunatly all browser cache each instance seperatly. Additionally even when the type is defined, IE is first issuing a [`HEAD`](https://ochronus.com/http-head-request-good-uses/) request to determin the content-type, which adds another round trip to this sollution.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2Fsvg-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicmro%2Fsvg-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicmro%2Fsvg-spinner/lists"}