{"id":49701974,"url":"https://github.com/cbmongithub/cli-loaders","last_synced_at":"2026-05-08T07:36:55.144Z","repository":{"id":271178205,"uuid":"912560031","full_name":"cbmongithub/cli-loaders","owner":"cbmongithub","description":"A collection of cli loaders","archived":false,"fork":false,"pushed_at":"2025-12-29T23:51:14.000Z","size":796,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-15T05:30:20.718Z","etag":null,"topics":["cbm","cli","cli-loading","cli-spinners","cli-utilities","command-line","command-line-tool","terminal","terminal-based"],"latest_commit_sha":null,"homepage":"https://cliloaders.com","language":"TypeScript","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/cbmongithub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2025-01-05T22:50:35.000Z","updated_at":"2026-03-22T18:52:53.000Z","dependencies_parsed_at":"2025-01-21T15:21:22.578Z","dependency_job_id":"a8c9649b-1456-4ceb-ae51-bc21a5154859","html_url":"https://github.com/cbmongithub/cli-loaders","commit_stats":null,"previous_names":["cbm-sh/shell-spinners","cbm-sh/cli-loaders","cbmongithub/cli-loaders"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cbmongithub/cli-loaders","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbmongithub%2Fcli-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbmongithub%2Fcli-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbmongithub%2Fcli-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbmongithub%2Fcli-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cbmongithub","download_url":"https://codeload.github.com/cbmongithub/cli-loaders/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbmongithub%2Fcli-loaders/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32771241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: 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":["cbm","cli","cli-loading","cli-spinners","cli-utilities","command-line","command-line-tool","terminal","terminal-based"],"created_at":"2026-05-08T07:36:54.407Z","updated_at":"2026-05-08T07:36:55.124Z","avatar_url":"https://github.com/cbmongithub.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\u003ca href=\"https://cliloaders.com\"\u003e\u003cimg style='border-radius: 12px;filter: drop-shadow(0px 9px 10px #888888);' src=\"https://repository-images.githubusercontent.com/912560031/de9f3f22-c3a1-4a4d-92f0-4042688be63c\" alt=\"Cli Loaders Repo Github Banner\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n# cli-loaders\n\nA collection of cli loaders for your command-line applications.\n\nVisit the [website](https://cliloaders.com) to see all loaders, copy keyframes, and more!\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Importing Loaders](#importing-loaders)\n  - [Initializing a Loader](#initializing-a-loader)\n  - [Customizing the Speed](#customizing-the-speed)\n  - [Customizing Everything](#customizing-everything)\n  - [Stopping the Loader](#stopping-the-loader)\n- [Available Loaders](#available-loaders)\n- [Examples](#examples)\n  - [Oh My Zsh Example](#oh-my-zsh-example)\n  - [Next.js Component Example](#nextjs-component-example)\n- [Contributing](#contributing)\n- [License](#license)\n- [Special Thanks](#special-thanks)\n\n## Installation\n\nTo install the package, use npm or yarn:\n\n```bash\nnpm install cli-loaders;\n# or\nyarn add cli-loaders;\n# or\nbun install cli-loaders;\n```\n\n## Usage\n\n### Importing Loaders\n\nImport the loader initializer:\n\n```typescript\nimport { initCliLoader } from 'cli-loaders';\n```\n\n### Initializing a Loader\n\nYou can initialize any loader by its name using `initCliLoader`:\n\n```typescript\nimport { initCliLoader, dots_1 } from 'cli-loaders';\n\n// Initialize by name\ninitCliLoader('dots_1');\n\n// initCliLoader(dots_1);\n```\n\n### Customizing the Speed\n\nYou can also customize the speed of the loader:\n\n```typescript\nimport { initCliLoader, dots_1 } from 'cli-loaders';\n\n// Initialize with custom speed\ninitCliLoader('dots_1', 150);\n// initCliLoader(dots_1, 150);\n```\n\n### Customizing Everything\n\nNew in v2.0+, you can import the cli loader initializer, `initCliLoader` for full customization:\n\n```typescript\nimport { initCliLoader, dots_14 } from 'cli-loaders';\n```\n\nThen use it with your own speed and keyframe arguments:\n\n```typescript\nimport { initCliLoader, dots_14 } from 'cli-loaders';\n\ninitCliLoader(dots_14); // Render loader\ninitCliLoader(dots_14, 100); // Render loader with custom speed\ninitCliLoader(dots_14, 100, [\"⠋\",\"⠙\",\"⠹\",\"⠸\",\"⠼\",\"⠴\",\"⠦\",\"⠧\",\"⠇\",\"⠏\"]); // Render loader with speed and keyframes customized\n```\n\nOr you could customize it with an object:\n\n```typescript\nconst myAwesomeLoader = {\n    speed: 100,\n    keyframes: [\"..\", \".\"]\n};\n\ninitCliLoader(myAwesomeLoader);\n```\n\n### Stopping the Loader\n\nTo stop the loader, you can use `clearInterval` with the interval ID returned by `initCliLoader`:\n\n```typescript\nimport { initCliLoader } from 'cli-loaders';\n\nconst intervalId = initCliLoader('dots_1');\n\n// Stop the loader after some time\nsetTimeout(() =\u003e {\n  clearInterval(intervalId);\n}, 5000);\n```\n\n## Available Loaders\n\nHere are some of the available loaders you can use:\n\n- `arrows_1`\n- `arrows_2`\n- `bars_1`\n- `bars_2`\n- `circles_1`\n- `circles_2`\n- `dots_1`\n- `dots_2`\n- `emojis_1`\n- `emojis_2`\n- `lines_1`\n- `lines_2`\n- `numbers_1`\n- `numbers_2`\n- `squares_1`\n- `squares_2`\n- `symbols_1`\n- `symbols_2`\n- `togglers_1`\n- `togglers_2`\n\nFor a full list of available loaders, please refer to the [source code](/src/cli-loaders.ts) or the [website](https://cliloaders.com).\n\n## Examples\n\n### Oh My Zsh Example\n\n```bash\nfunction start_loader() {\n    local keyframes=(YOUR_COPIED_KEYFRAMES) # Keyframes for the loader\n    local speed=0.1 # Speed at which the keyframes change\n    local pname=$1 # PID of the process to wait for\n\n    while kill -0 \"$pname\" 2\u003e/dev/null; do\n        for frame in \"${keyframes[@]}\"; do\n            printf \"\\r%s %s\" \"$frame\"\n            sleep $speed\n        done\n    done\n\n    # Clear the loader after the process completes\n    printf \"\\r%s\\n\" \"Done!\"\n}\n\nfunction custom_loader() {\n    # Example of using the loader with a background task\n    (sleep 5) \u0026  # Simulate a long-running task in the background\n    start_loader $! # Call the loader with the PID of the background process\n}\n```\n\n### Nextjs Component Example\n\n```tsx\n// @/components/Loader.tsx\n\"use client\";\n\nimport React, { useEffect, useState } from 'react';\n\ntype LoaderProps = {\n    speed: number;\n    keyframes: string[];\n    className?: string;\n};\n\nexport const Loader: React.FC\u003cLoaderProps\u003e = ({ speed, keyframes, className }) =\u003e {\n    const [currentFrame, setCurrentFrame] = useState(keyframes[0]);\n\n    useEffect(() =\u003e {\n        let index = 0;\n        const interval = setInterval(() =\u003e {\n            setCurrentFrame(keyframes[index]);\n            index = (index + 1) % keyframes.length;\n        }, speed);\n\n        return () =\u003e clearInterval(interval);\n    }, [keyframes, speed]);\n\n    return (\n        \u003cdiv className={className}\u003e{currentFrame}\u003c/div\u003e\n    );\n};\n```\n\nThen import and use the component:\n\n```tsx\nimport { Loader } from \"@/components/Loader\";\nimport { dots_14 } from \"cli-loaders\";\n\nconst Page = () =\u003e (\n    \u003cLoader\n        speed={dots_14.speed}\n        keyframes={dots_14.keyframes}\n        className=\"relative text-4xl font-mono flex flex-col justify-center items-center overflow-hidden\"\n    /\u003e\n);\n\nexport default Page;\n```\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Special Thanks\n\nSpecial thanks to [cli-spinners](https://www.npmjs.com/package/cli-spinners) and [sindresorhus](https://github.com/sindresorhus) for the json file for some of the loaders in this project.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbmongithub%2Fcli-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcbmongithub%2Fcli-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbmongithub%2Fcli-loaders/lists"}