{"id":20494318,"url":"https://github.com/voltra/spinner-lord","last_synced_at":"2026-05-28T21:31:09.649Z","repository":{"id":57367518,"uuid":"110955908","full_name":"Voltra/spinner-lord","owner":"Voltra","description":"A CSS bulk of animated spinners used for loading","archived":false,"fork":false,"pushed_at":"2018-01-06T19:18:31.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T01:34:41.549Z","etag":null,"topics":["animated-spinners","css","css-library","css3","loading-spinner"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/Voltra.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-11-16T10:11:29.000Z","updated_at":"2020-10-05T14:40:09.000Z","dependencies_parsed_at":"2022-08-23T20:10:21.476Z","dependency_job_id":null,"html_url":"https://github.com/Voltra/spinner-lord","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/Voltra%2Fspinner-lord","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Fspinner-lord/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Fspinner-lord/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Voltra%2Fspinner-lord/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Voltra","download_url":"https://codeload.github.com/Voltra/spinner-lord/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242076007,"owners_count":20068231,"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":["animated-spinners","css","css-library","css3","loading-spinner"],"created_at":"2024-11-15T17:39:06.124Z","updated_at":"2026-05-28T21:31:09.621Z","avatar_url":"https://github.com/Voltra.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# spinner-lord\n\u003e  A CSS bulk of animated spinners used for loading\n\n\n\n# What is `spinner-lord` ?\n\n`spinner-lord` is a CSS only library that provides multiple lightweight circular loading spinners.\n\nIt provides several ready-to-use spinners as well as the ability to create your own easily.\n\n# Why should I care ? Do I even need a loading spinner ?\n\nThe web as evolve since its first premises, now many rely on web applications, single page applications, heavy websites and so on.\n\nThe common factor is that sometimes, it is not easy for you to provide every single resource needed in a correct amount of time, even for the very minimal requirements (the page itself, stylesheets, scripts, etc...).\n\nOne solution to this problem would be to use a loading icon, in our case a loading spinner. This should grant you enough time to load your precious resources in the background while keeping the user visually distracted.\n\n# How do I get started ?\n\nFirst things first, you need to download this library.\n\nYou can :\n\n* Download the source files directly from [github](https://github.com/Voltra/spinner-lord)\n* Download it using npm : `npm install --save spinner-lord`\n\n\n\nOnce downloaded, you'll find yourself with a `css` folder within which a `variants` folder is contained.\n\nYou'll need two (or three) thing(s) : the library's core file (`spinner-lord.css`), a reset sheet (don't panic, `reset.css` is here if you don't have one) and your eventual variant.\n\n\n\nOnce those two are ready, you can proceed to use them in your page :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- [...] --\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/your/reset/sheet\"/\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/spinner-lord.css\"/\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/variant/if/you/want/to/use/one.css\"/\u003e\n    \u003c!-- [...] --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"spinner-lord\" class=\"active\"\u003e \u003c!-- your variant might need a class here --\u003e\n      \u003cspan\u003e\u003c/span\u003e\n      \u003c!-- eventual additionnal spans (for variants), check the @span-amount in your variant's stylesheet --\u003e\n    \u003c/div\u003e\n    \u003c!-- [...] --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\nHowever, the above will only display the spinner and nothing else, you might want to remove it dynamically :\n\n```\n- add the \"active\" class dynamically upon start\n- replace the \"active\" class by the \"inactive\" class once everything is fully loaded\n- Once the transition finished, you can remove #spinner-lord from the DOM\n```\n\nIf you use jQuery or a jQuery-like library, the `js/removeSpinnerLord.js` file provides a function to remove it from the DOM (as well as `js/removeSpinnerLord.esm.js` which is the es6 module version of the above).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoltra%2Fspinner-lord","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoltra%2Fspinner-lord","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoltra%2Fspinner-lord/lists"}