{"id":20503715,"url":"https://github.com/withaarzoo/animated-cat-loader","last_synced_at":"2026-04-24T03:33:30.902Z","repository":{"id":190156776,"uuid":"682058376","full_name":"withaarzoo/Animated-Cat-Loader","owner":"withaarzoo","description":"This is a simple HTML and CSS code snippet that creates an animated cat loader. The loader features a playful animation of a cat formed by various segments. Each segment is given a distinct gradient effect, resulting in a visually appealing and engaging loader animation.","archived":false,"fork":false,"pushed_at":"2023-08-23T10:58:41.000Z","size":4,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-06T12:34:44.199Z","etag":null,"topics":["css","html","html-css","loader"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/withaarzoo.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}},"created_at":"2023-08-23T10:51:44.000Z","updated_at":"2024-03-30T14:15:51.000Z","dependencies_parsed_at":"2023-08-23T13:40:25.725Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Animated-Cat-Loader","commit_stats":null,"previous_names":["aarzoo75/animated-cat-loader","withaarzoo/animated-cat-loader"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withaarzoo/Animated-Cat-Loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Cat-Loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Cat-Loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Cat-Loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Cat-Loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Animated-Cat-Loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Cat-Loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32208359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T03:15:14.334Z","status":"ssl_error","status_checked_at":"2026-04-24T03:15:11.608Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["css","html","html-css","loader"],"created_at":"2024-11-15T19:33:47.677Z","updated_at":"2026-04-24T03:33:25.894Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Cat Loader\n\nThis is a simple HTML and CSS code snippet that creates an animated cat loader. The loader features a playful animation of a cat formed by various segments. Each segment is given a distinct gradient effect, resulting in a visually appealing and engaging loader animation.\n\n## Getting Started\n\nTo use this animated cat loader in your project, follow these steps:\n\n1. Copy the HTML code and paste it into your HTML file within the `\u003cbody\u003e` tag.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eAnimated Cat Loader\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cdiv class=\"cat\"\u003e\n        \u003c!-- Cat segments are added here --\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n2. Copy the CSS code and paste it into a file named `style.css` in the same directory as your HTML file.\n\n```css\n/* Paste the provided CSS code here */\n```\n\n3. Make sure to place both the HTML and CSS files in the same directory.\n\n## Customization\n\nYou can customize the loader to match your project's design by adjusting the colors, sizes, and animation timings in the CSS code. Here are a few things you can customize:\n\n- Background color: Modify the `background` property of the `.cat` class to change the background color of the loader.\n- Gradient colors: Update the gradient colors used in the `.cat__segment:before` pseudo-element to create your desired color scheme.\n- Animation duration: Adjust the animation duration and easing in the `@keyframes loop` to control the speed and smoothness of the loader animation.\n\n## Compatibility\n\nThis code is written using HTML and CSS and should be compatible with most modern web browsers. It utilizes CSS animations for the loader effect, so ensure that your target browsers support CSS animations.\n\n## Credits\n\nThis animated cat loader was created by [Aarzoo](https://twitter.com/Aarzoo75) on Twitter.\n\nFeel free to use and modify this code for your projects. If you find it helpful, consider giving credit to the original author.\n\n## License\n\nThis code is provided under the MIT License. You can find more details in the `LICENSE` file.\n\n---\n\nFeel free to add this animated cat loader to your web projects to add a touch of fun and creativity to your loading screens!\n\n## Preview\n\u003cimg width=\"960\" alt=\"Screenshot 2023-08-23 161036\" src=\"https://github.com/Aarzoo75/Animated-Cat-Loader/assets/59678435/9f15aa09-f51a-4f04-a2e1-d63859154452\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-cat-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fanimated-cat-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-cat-loader/lists"}