PHPackages avalynx/avalynx-loader - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. avalynx/avalynx-loader ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-loader ====================== AvalynxLoader is a lightweight JavaScript library designed to provide a loading overlay for DOM elements. Based on Bootstrap >=5.3 without any framework dependencies. 1.0.2(4mo ago)21231MITJavaScriptCI passing Since May 30Pushed 4mo ago1 watchersCompare [ Source](https://github.com/avalynx/avalynx-loader)[ Packagist](https://packagist.org/packages/avalynx/avalynx-loader)[ Docs](https://github.com/avalynx/avalynx-loader)[ RSS](/packages/avalynx-avalynx-loader/feed)WikiDiscussions main Synced yesterday READMEChangelog (5)Dependencies (1)Versions (6)Used By (1) AvalynxLoader ============= [](#avalynxloader) [![npm version](https://camo.githubusercontent.com/dafd050f77f58cf4d60a1753330d30e1b2fdec1e6566a147db01516501ba1e85/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d6c6f61646572)](https://www.npmjs.com/package/avalynx-loader)[![npm downloads](https://camo.githubusercontent.com/4943a005e5f82aa1be1778f764489e2572c49b410d7b4caacab0f8accded406d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d6c6f61646572)](https://www.npmjs.com/package/avalynx-loader)[![jsDelivr](https://camo.githubusercontent.com/90cebad8c317ce6778a99ec00b0d1640604877049631f980590bac95dc048811/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d6c6f61646572)](https://www.jsdelivr.com/package/npm/avalynx-loader)[![License](https://camo.githubusercontent.com/03fd8f439bc0e0dea1f2fe73d76831ff10efce7a0af6e903e1733ac59402aaf7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d6c6f61646572)](LICENSE)[![Tests](https://github.com/avalynx/avalynx-loader/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-loader/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/a932e003de33a88e5e2ff889743a761319f0080b69f700ffe32fd0d77c4fb4f8/68747470733a2f2f636f6465636f762e696f2f67682f6176616c796e782f6176616c796e782d6c6f616465722f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/avalynx/avalynx-loader)[![GitHub stars](https://camo.githubusercontent.com/a7f2c41f251298fea765973b4d54dafc4a57b7638f98d0f0eeaaf61e939b9cec/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d6c6f616465723f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-loader) AvalynxLoader is a lightweight JavaScript library designed to provide a loading overlay for DOM elements. Based on Bootstrap >=5.3 without any framework dependencies. Features -------- [](#features) - **Lightweight**: AvalynxLoader is a lightweight library without heavy dependencies. - **Loading Overlay**: AvalynxLoader provides a simple way to create and manage loading overlays for DOM elements. Example ------- [](#example) Here's a simple example of how to use AvalynxLoader in your project: - [Overview](https://avalynx-loader.jbs-newmedia.de/examples/index.html) - [Loader for 2 elements](https://avalynx-loader.jbs-newmedia.de/examples/loader-for-2-elements.html) - [Loader for 3 elements with load button](https://avalynx-loader.jbs-newmedia.de/examples/loader-for-3-elements-with-load-button.html) Installation ------------ [](#installation) To 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. First, include Bootstrap: ``` ``` Then, include AvalynxLoader: ``` ``` Replace `path/to/avalynx-loader.js` with the actual path to the file in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-loader/)) -------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxLoader is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-loader)) --------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxLoader is also available as a npm package. You can add it to your project with the following command: ``` npm install avalynx-loader ``` After installing, you can import AvalynxLoader into your JavaScript file like this: ``` import { AvalynxLoader } from 'avalynx-loader'; ``` Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-loader ``` After installing, you can import AvalynxLoader into your JavaScript file like this: ``` import { AvalynxLoader } from 'avalynx-loader'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly. Installation via Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-loader/dist/js/avalynx-loader.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-loader)) ----------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxLoader is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-loader ``` After installing, you can import AvalynxLoader into your HTML file like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxLoader displays correctly. Usage ----- [](#usage) To use AvalynxLoader in your project, include the AvalynxLoader JavaScript file in your project and initialize the class with the appropriate selector. ``` const myLoader = new AvalynxLoader("#myElement"); myLoader.load=true; /* do something */ myLoader.load=false; ``` Options ------- [](#options) AvalynxLoader allows the following options for customization: - `selector`: A custom selector for targeting tables within the DOM (default: `'.avalynx-loader'`). - `options`: An object containing the following keys: - `className`: (string) A custom class name for the loader element (default: `'spinner-border text-primary'`). - `language` An object containing the following keys: - `loaderText`: (string) A custom text for the loader element. If set to empty string, no text will be displayed. (default: `'Loading...'`). Contributing ------------ [](#contributing) Contributions 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: - Bug fixes - Feature enhancements - Documentation improvements Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project. License ------- [](#license) AvalynxLoader is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If 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. Thank you for considering AvalynxLoader for your project! ### Health Score 39 — LowBetter than 84% of packages Maintenance77 Regular maintenance activity Popularity14 Limited adoption so far Community11 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 96.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~158 days Total 5 Last Release 128d ago Major Versions 0.0.3 → 1.0.02025-06-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (26 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags ajaxavalynxbootstrapbootstrap5componentloaderspinnerloaderajaxcomponentbootstrapspinnerbootstrap5avalynx ### Embed Badge ![Health badge](/badges/avalynx-avalynx-loader/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-loader/health.svg)](https://phpackages.com/packages/avalynx-avalynx-loader) ``` ### Alternatives [kartik-v/yii2-tree-manager An enhanced tree management module with tree node selection and manipulation using nested sets. 156552.1k15](/packages/kartik-v-yii2-tree-manager)[haubek/bootstrap4c-chosen Bootstrap 4 Component - Chosen 8176.0k](/packages/haubek-bootstrap4c-chosen)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2193.4k18](/packages/datatablesnet-datatablesnet-bs5)[kartik-v/yii2-widget-touchspin A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle touchspines (sub repo split from yii2-widgets) 194.3M6](/packages/kartik-v-yii2-widget-touchspin)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2925.5k14](/packages/datatablesnet-datatablesnet-bs4)[bizley/ajaxdropdown Bootstrap dropdown list with AJAX data. 1525.4k](/packages/bizley-ajaxdropdown) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)