{"id":20503581,"url":"https://github.com/withaarzoo/loader","last_synced_at":"2026-06-10T09:31:57.106Z","repository":{"id":223614080,"uuid":"761038062","full_name":"withaarzoo/loader","owner":"withaarzoo","description":"This repository contains HTML and CSS code to create an animated loader with a wave effect. Follow the steps below to understand how to use this code.","archived":false,"fork":false,"pushed_at":"2024-02-22T04:46:30.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T20:42:04.412Z","etag":null,"topics":["codewithaar","css","html"],"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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-21T05:51:06.000Z","updated_at":"2024-02-21T11:30:28.000Z","dependencies_parsed_at":"2024-11-15T19:32:44.910Z","dependency_job_id":"48034f8d-a337-4f07-8534-1c1513b9502e","html_url":"https://github.com/withaarzoo/loader","commit_stats":null,"previous_names":["withaarzoo/loader"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/withaarzoo/loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2Floader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2Floader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2Floader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2Floader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2Floader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34146871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["codewithaar","css","html"],"created_at":"2024-11-15T19:32:27.081Z","updated_at":"2026-06-10T09:31:57.060Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Loader\n\nThis repository contains HTML and CSS code to create an animated loader with a wave effect. Follow the steps below to understand how to use this code .\n\n## Preview\n![preview](https://github.com/withaarzoo/loader/assets/59678435/bf7dbee2-e9b5-4d10-a192-7b53c5f33edf)\n\n## Steps:\n\n1. **Clone the Repository:**\n   ```\n   git clone https://github.com/withaarzoo/loader.git\n   ```\n\n2. **Navigate to the Directory:**\n   ```\n   cd loader\n   ```\n\n3. **HTML Structure:**\n   - Open `index.html` file in your preferred text editor.\n   - You will find the following HTML structure:\n\n   ```html\n   \u003c!DOCTYPE html\u003e\n   \u003chtml lang=\"en\"\u003e\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 Loader\u003c/title\u003e\n   \u003c/head\u003e\n   \u003cbody\u003e\n       \u003cdiv class=\"loading-wave\"\u003e\n           \u003cdiv class=\"loading-bar\"\u003e\u003c/div\u003e\n           \u003cdiv class=\"loading-bar\"\u003e\u003c/div\u003e\n           \u003cdiv class=\"loading-bar\"\u003e\u003c/div\u003e\n           \u003cdiv class=\"loading-bar\"\u003e\u003c/div\u003e\n       \u003c/div\u003e\n   \u003c/body\u003e\n   \u003c/html\u003e\n   ```\n\n4. **CSS Styles:**\n   - Open `style.css` file.\n   - You'll find the CSS styles responsible for creating the loader animation.\n   - The animation is applied to the `.loading-bar` class using keyframes.\n   - Each `.loading-bar` is given a specific animation delay to create a wave effect.\n\n   ```css\n   * {\n       margin: 0;\n       padding: 0;\n       box-sizing: border-box;\n   }\n\n   body {\n       display: flex;\n       align-items: center;\n       justify-content: center;\n       min-height: 100vh;\n   }\n\n   .loading-wave {\n       width: 300px;\n       height: 100px;\n       display: flex;\n       justify-content: center;\n       align-items: flex-end;\n   }\n\n   .loading-bar {\n       width: 20px;\n       height: 10px;\n       margin: 0 5px;\n       background-color: #3498db;\n       border-radius: 5px;\n       animation: loading-wave-animation 1s ease-in-out infinite;\n   }\n\n   .loading-bar:nth-child(2) {\n       animation-delay: 0.1s;\n   }\n\n   .loading-bar:nth-child(3) {\n       animation-delay: 0.2s;\n   }\n\n   .loading-bar:nth-child(4) {\n       animation-delay: 0.3s;\n   }\n\n   @keyframes loading-wave-animation {\n       0% {\n           height: 10px;\n       }\n       50% {\n           height: 50px;\n       }\n       100% {\n           height: 10px;\n       }\n   }\n   ```\n\n5. **View in Browser:**\n   - Open `index.html` in your web browser to see the animated loader in action.\n\n6. **Customization:**\n   - You can customize the loader by adjusting the width, height, colors, animation duration, etc., in the CSS file.\n\n7. **Integration:**\n   - Integrate this loader into your projects by copying the HTML structure and CSS styles.\n\n8. **Enjoy!**\n   - Enjoy using this animated loader in your projects.\n\nFeel free to reach out if you have any questions or need further assistance!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Floader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Floader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Floader/lists"}