{"id":18465135,"url":"https://github.com/avalynx/avalynx-loader","last_synced_at":"2025-06-22T07:34:02.830Z","repository":{"id":241406414,"uuid":"782422591","full_name":"avalynx/avalynx-loader","owner":"avalynx","description":"AvalynxLoader is a lightweight JavaScript library designed to provide a loading overlay for DOM elements. Based on Bootstrap \u003e=5.3 without any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-06-05T20:25:05.000Z","size":216,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T01:44:50.151Z","etag":null,"topics":["ajax","avalynx","bootstrap","bootstrap5","component","loader","spinner"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avalynx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-04-05T09:14:08.000Z","updated_at":"2025-06-05T20:24:05.000Z","dependencies_parsed_at":"2025-04-14T09:51:15.321Z","dependency_job_id":"c51ff78d-b8ea-461a-8a49-07d8eac1085d","html_url":"https://github.com/avalynx/avalynx-loader","commit_stats":null,"previous_names":["avalynx/avalynx-loader"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/avalynx/avalynx-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261255849,"owners_count":23131474,"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":["ajax","avalynx","bootstrap","bootstrap5","component","loader","spinner"],"created_at":"2024-11-06T09:12:05.320Z","updated_at":"2025-06-22T07:34:02.793Z","avatar_url":"https://github.com/avalynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxLoader\n\nAvalynxLoader is a lightweight JavaScript library designed to provide a loading overlay for DOM elements. Based on Bootstrap \u003e=5.3 without any framework dependencies.\n\n## Features\n\n- **Lightweight**: AvalynxLoader is a lightweight library without heavy dependencies.\n- **Loading Overlay**: AvalynxLoader provides a simple way to create and manage loading overlays for DOM elements.\n\n## Example\n\nHere's a simple example of how to use AvalynxLoader in your project:\n\n* [Overview](https://avalynx-loader.jbs-newmedia.de/examples/index.html)\n* [Loader for 2 elements](https://avalynx-loader.jbs-newmedia.de/examples/loader-for-2-elements.html)\n* [Loader for 3 elements with load button](https://avalynx-loader.jbs-newmedia.de/examples/loader-for-3-elements-with-load-button.html)\n\n\n## Installation\n\nTo use AvalynxLoader in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxLoader to work correctly.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxLoader:\n\n```html\n\u003cscript src=\"path/to/avalynx-loader.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-loader.js` with the actual path to the file in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-loader/))\n\nAvalynxLoader is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-loader@1.0.0/dist/js/avalynx-loader.min.js\"\u003e\u003c/script\u003e\n```\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-loader))\n\nAvalynxLoader is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-loader\n```\n\nAfter installing, you can import AvalynxLoader into your JavaScript file like this:\n\n```javascript\nimport { AvalynxLoader } from 'avalynx-loader';\n```\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-loader\n```\n\nAfter installing, you can import AvalynxLoader into your JavaScript file like this:\n\n```javascript\nimport { AvalynxLoader } from 'avalynx-loader';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-loader/dist/js/avalynx-loader.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-loader))\n\nAvalynxLoader is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-loader\n```\n\nAfter installing, you can import AvalynxLoader into your HTML file like this:\n\n```html\n\u003cscript src=\"vendor/avalynx/avalynx-loader/dist/js/avalynx-loader.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly.\n\n## Usage\n\nTo use AvalynxLoader in your project, include the AvalynxLoader JavaScript file in your project and initialize the class with the appropriate selector.\n\n```javascript\nconst myLoader = new AvalynxLoader(\"#myElement\");\nmyLoader.load=true;\n/* do something */\nmyLoader.load=false;\n```\n\n## Options\n\nAvalynxLoader allows the following options for customization:\n\n- `selector`: A custom selector for targeting tables within the DOM (default: `'.avalynx-loader'`).\n- `options`: An object containing the following keys:\n    - `className`: (string) A custom class name for the loader element (default: `'spinner-border text-primary'`).\n- `language` An object containing the following keys:\n    - `loaderText`: (string) A custom text for the loader element. If set to empty string, no text will be displayed. (default: `'Loading...'`).\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxLoader is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-loader/issues) or submit a pull request.\n\nThank you for considering AvalynxLoader for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-loader/lists"}