{"id":20503688,"url":"https://github.com/withaarzoo/animated-rocket-loader","last_synced_at":"2025-03-05T20:40:03.464Z","repository":{"id":190338206,"uuid":"682412145","full_name":"withaarzoo/Animated-Rocket-Loader","owner":"withaarzoo","description":"This is a simple HTML and CSS code snippet that creates an animated rocket loader. It's a fun and visually appealing way to indicate that something is loading or processing in your web application. ","archived":false,"fork":false,"pushed_at":"2023-08-24T05:58:26.000Z","size":4,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T07:35:41.551Z","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,"roadmap":null,"authors":null}},"created_at":"2023-08-24T05:50:47.000Z","updated_at":"2025-01-16T07:13:39.000Z","dependencies_parsed_at":"2023-12-30T19:01:55.446Z","dependency_job_id":null,"html_url":"https://github.com/withaarzoo/Animated-Rocket-Loader","commit_stats":null,"previous_names":["aarzoo75/animated-rocket-loader","withaarzoo/animated-rocket-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Rocket-Loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Rocket-Loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Rocket-Loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Rocket-Loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Animated-Rocket-Loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242100356,"owners_count":20071702,"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":["css","html","html-css","loader"],"created_at":"2024-11-15T19:33:39.326Z","updated_at":"2025-03-05T20:40:03.425Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Rocket Loader\n\nThis is a simple HTML and CSS code snippet that creates an animated rocket loader. It's a fun and visually appealing way to indicate that something is loading or processing in your web application. The rocket moves upward and emits smoke as it goes, giving the impression of a rocket taking off.\n\n## How to Use\n\nTo use this animated rocket loader in your web project, follow these steps:\n\n1. Copy the HTML code into your HTML file, typically within the `\u003cbody\u003e` tags.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003c!-- Add the CSS link to your HTML head --\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003ctitle\u003eAnimated Rocket Loader\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003c!-- Add the rocket loader div --\u003e\n    \u003cdiv class=\"rocket-loader\"\u003e\n        \u003cdiv class=\"rocket\"\u003e\n            \u003cdiv class=\"rocket-extras\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"jet\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n2. Copy the CSS code into your `style.css` file or include it in your existing CSS file.\n\n```css\n@import url(\"https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i\");\n\n/* ... (Paste the CSS code here) ... */\n```\n\n3. Save your HTML and CSS files.\n\n4. Open your HTML file in a web browser to see the animated rocket loader in action.\n\n## Customization\n\nFeel free to customize the loader to match your project's style and preferences. You can adjust the following aspects:\n\n- **Colors**: Modify the background colors and gradients in the CSS to change the appearance of the loader.\n\n- **Rocket Size**: Adjust the width and height properties in the `.rocket-loader` and `.rocket` classes to change the size of the rocket.\n\n- **Text**: You can change the \"Loading...\" text or remove it altogether by modifying the `.rocket-loader::before` CSS rule.\n\n- **Animation Speed**: You can alter the animation durations in the CSS to make the rocket move faster or slower.\n\n## Credits\n\nThis code snippet has been crafted by [Aarzoo](https://twitter.com/Aarzoo75).\n\nIf you find this loader useful or have any suggestions for improvements, please feel free to contribute or provide feedback.\n\nEnjoy using this animated rocket loader in your projects! 🚀\n\n## Preview\n\u003cimg width=\"952\" alt=\"Screenshot 2023-08-24 112511\" src=\"https://github.com/Aarzoo75/Animated-Rocket-Loader/assets/59678435/dfe9e984-e6bc-44e5-b415-2d121e2a38dc\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-rocket-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fanimated-rocket-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-rocket-loader/lists"}