{"id":18254255,"url":"https://github.com/brikcss/spinner","last_synced_at":"2025-07-13T07:07:26.362Z","repository":{"id":143745465,"uuid":"128841834","full_name":"brikcss/spinner","owner":"brikcss","description":"Loading spinner icon. Patterned after Material Design's circular activity indicator.","archived":false,"fork":false,"pushed_at":"2018-11-08T20:43:43.000Z","size":155,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T07:16:14.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/brikcss.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-09T22:37:28.000Z","updated_at":"2018-04-18T04:33:49.000Z","dependencies_parsed_at":"2023-03-29T00:49:05.041Z","dependency_job_id":null,"html_url":"https://github.com/brikcss/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/brikcss%2Fspinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934808,"owners_count":21020724,"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-05T10:11:16.839Z","updated_at":"2025-04-08T21:47:24.021Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Activity Spinner Icon\n\n\u003e Loading activity spinner icon. Patterned after Material Design's [circular activity indicator](https://material.io/guidelines/components/progress-activity.html#progress-activity-types-of-indicators).\n\n\u003c!-- Shields. --\u003e\n\u003cp\u003e\n\t\u003c!-- NPM version. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/spinner\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/spinner.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- NPM downloads/month. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/spinner\"\u003e\n\t\t\u003cimg alt=\"NPM downloads per month\" src=\"https://img.shields.io/npm/dm/@brikcss/spinner.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Travis branch. --\u003e\n\t\u003ca href=\"https://github.com/brikcss/spinner/tree/master\"\u003e\n\t\t\u003cimg alt=\"Travis branch\" src=\"https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Codacy. --\u003e\n\t\u003ca href=\"https://www.codacy.com/app/thezimmee/spinner\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/codacy/grade/031ed8c53a7b401080dbf1a64a69f614/master.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Coveralls --\u003e\n\t\u003ca href='https://coveralls.io/github/brikcss/spinner?branch=master'\u003e\n\t\t\u003cimg src='https://img.shields.io/coveralls/github/brikcss/spinner/master.svg?style=flat-square' alt='Coverage Status' /\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Commitizen friendly. --\u003e\n\t\u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n\t\t\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Semantic release. --\u003e\n\t\u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n\t\t\u003cimg alt=\"semantic release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Prettier code style. --\u003e\n\t\u003ca href=\"https://prettier.io/\"\u003e\n\t\t\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- MIT License. --\u003e\n\t\u003c!-- \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n\t\t\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/express.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\n## Environment / tooling support\n\n| Node/CommonJS | CLI | UMD | ESModule | VanillaJS | AngularJS | CSS | SASS |\n|:-------------:|:---:|:---:|:--------:|:---------:|:---------:|:---:|:----:|\n| ✔             | x   | ✔   | ✔       | ✔         | ✔        | ✔   | ✔   |\n\n## Install\n\n1. Install package:\n\n\t```sh\n\tnpm install @brikcss/spinner\n\t```\n\n2. Include CSS or SASS files from one of:\n\n\t```\n\t/dist\n\t\t/css\n\t\t/sass\n\t```\n\n3. Include JS files from one of:\n\n\t```\n\t/dist\n\t\t/angularjs\n\t\t/commonjs\n\t\t/esmodule\n\t\t/umd\n\t\t/vanillajs\n\t```\n\n## JS Usage\n\n### Spinner API\n\n- **`all`**: All spinner instances, by ID.\n- **`Spinner.create(element, options = {})`**: Create and return a spinner instance.\n- **`Spinner.toggle(id)`**: Toggle a spinner instance.\n- **`Spinner.load(id)`** Load / activate a spinner instance.\n- **`Spinner.unload(id)`** Unload / deactivate a spinner instance.\n- **`Spinner.destroy(id)`** Destroy a spinner instance.\n\n_Note: Each method returns the spinner instance, except the `destroy` method returns a Boolean._\n\n### Spinner instance\n\nYou can call most of the same methods from the spinner instance without knowing the spinner's ID.\n\n- **`instance.toggle()`**: Toggle a spinner instance.\n- **`instance.load()`** Load / activate a spinner instance.\n- **`instance.unload()`** Unload / deactivate a spinner instance.\n- **`instance.destroy()`** Destroy a spinner instance.\n\n### AngularJS\n\nThe AngularJS `SpinnerService` is simply a thin wrapper around the vanilla core Spinner service, with the following directives added for convenience in interacting with Spinner:\n\n- **`\u003cspinner options=\"{...}\"\u003e`** Create a spinner element in the DOM.\n- **`[spinner-toggle=\"{{id}}\"]`** Toggle the spinner that matches `id`.\n\nTo toggle a spinner with a controller variable, use the `ng-class` directive to toggle the active class:\n\n```html\n\u003cspinner options=\"{...}\" ng-class=\"{'spinner--is-spinning': myVariableIsTrue}\"\u003e\u003c/spinner\u003e\n```\n\n## CSS Usage\n\n### Classes\n\n- `spinner`: Spinner base class. _Note: This won't show anything in the UI until the spinner has the active class modifier._\n- `spinner--is-spinning`: Activate the spinner and show in the UI.\n- `spinner--small`: Small spinner.\n- `spinner--large`: Large spinner.\n- `spinner--inline`: Inline spinner. For display with inline elements such as text or buttons.\n- `spinner--multicolor`: Multicolor spinner track.\n- `spinner--dressed`: \"Dresses\" spinner with a background and padding.\n- `spinner--clean`: Cleans up background and padding from a dressed spinner.\n- `spinner--absolute`: Absolutely positioned spinner.\n- `spinner--slide`: Spinner which slides from the top of an element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fspinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Fspinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fspinner/lists"}