{"id":18931047,"url":"https://github.com/rendro/svg-spinner","last_synced_at":"2025-07-31T19:07:17.209Z","repository":{"id":5552850,"uuid":"6757207","full_name":"rendro/SVG-Spinner","owner":"rendro","description":"Loading spinner with SVG, no JavaScript, no unnecessary DOM Elements","archived":false,"fork":false,"pushed_at":"2014-11-14T00:48:16.000Z","size":142,"stargazers_count":113,"open_issues_count":3,"forks_count":20,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-31T19:43:57.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://rendro.github.io/SVG-Spinner/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rendro.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-19T08:43:04.000Z","updated_at":"2024-12-29T00:18:37.000Z","dependencies_parsed_at":"2022-07-07T01:03:02.794Z","dependency_job_id":null,"html_url":"https://github.com/rendro/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/rendro%2FSVG-Spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FSVG-Spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FSVG-Spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FSVG-Spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rendro","download_url":"https://codeload.github.com/rendro/SVG-Spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239927852,"owners_count":19719836,"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-08T11:40:16.283Z","updated_at":"2025-02-20T23:13:17.732Z","avatar_url":"https://github.com/rendro.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Spinner\n\nModern loading spinner without JavaScript or unnecessary DOM Elements. The spinner and animations are implemented as SVG.\n\n## Why SVG?\nSVG images are quite small and fully scalable as they are vector based. A simple, animated SVG spinner with 12 dots weights about 750 bytes (gzipped ~350 bytes) and looks nice at any resolution. For comparison, the spin.js script weights more than 4 times as much.\n\n## Too lazy to write SVG files?\nNo problem. I added a spin generator script written in CoffeeScript (and a compiled version) executable with Node.js to generate your spinner SVGs.\n\n### Usage\nRun in your terminal:\n\n    $ coffee tools/spingenerator.coffee \u003e spinner.svg\n\nor the following, if you don't have CoffeeScript installed:\n\n    $ node tools/spingenerator.js \u003e spinner.svg\n\n### Parameters\nWouldn't it be sad if you could not change a single parameter? Indeed, so you can:\n\n    $ coffee tools/spingenerator.coffee \u003cdots\u003e \u003cdotSize\u003e \u003cradius\u003e \u003cduration\u003e \u003cminOpacity\u003e \u003cmaxOpacity\u003e \u003ceccentricity\u003e \u003ccolor\u003e\n\n* `dots` (int) Number of dots (Default: 12)\n* `dotSize` (float) Size (radius) of one dot (Default: 2)\n* `radius` (float) Radius of the spinner (Default: 10)\n* `duration` (float) Speed of the animation in seconds (e.g. `1.4`) (Default: 1.2)\n* `minOpacity` (float between 0 and 1) Minimum opacity of a dot (Default: 0)\n* `maxOpacity` (float between 0 and 1) Maximum opacity of a dot (Default: 1)\n* `eccentricity` (float between -0.9999 and 0.9999) The eccentricity of the ellipse; semimajor (radius == dotSize) axis is Y if positive, X if negative (Default: 0)\n* `color` (string) A valid CSS color to fill the dots (Default: \"black\")\n\nIf you only want the dots without any animation, set the duration parameter to a negative value.\n\n### Example\n\nA spinner with 16 Dots at the size of 2, a radius of 20 and a minimum opacity of 0.3:\n\n    $ coffee spingenerator.coffee 16 2 20 0.3 \u003e spin.svg\n\n## Browser Support:\n\nIf you don't have to support for every crappy web browser like IE6-8 there is no reason not to use SVG spinning animations. For ancient technology you can always include a fallback png/gif or whatever you want.\n\n**SVG is supported by the following browsers:**\n\n* IE 9+\n* Firefox 4+\n* Chrome 4+\n* Safari (3.2+ partial, 5+ full)\n* Opera 9.5+\n* iOS (3.2+ partial, 4.2+ full)\n* Opera Mini 5+\n* Android Browser 3+\n* Blackberry Browser 7+\n* Opera Mini 10+\n* Chrome for Android 18+\n* Firefox for Android 15+\n\n(see: [Can I Use: SVG in CSS backgrounds](http://caniuse.com/#feat=svg-css))\n\n## License\nWTFPL (see license.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Fsvg-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendro%2Fsvg-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2Fsvg-spinner/lists"}