# ldbutton

> css for buttons that load

Latest version **2.0.5** (published 2025-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ldbutton
pnpm add ldbutton
yarn add ldbutton
bun add ldbutton
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2025-03-21 |
| First published | 2019-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.12.6 |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | zbryikt |
| Maintainers | tkirby |

## Links

- npm: https://www.npmjs.com/package/ldbutton
- Repository: https://github.com/loadingio/ldButton
- Homepage: https://loading.io/button/
- Issues: https://github.com/loadingio/ldButton/issues
- npm.io page: https://npm.io/package/ldbutton

## Recent versions

- 2.0.5 (latest) — 2025-03-21
- 2.0.4 — 2024-01-01
- 2.0.3 — 2024-01-01
- 2.0.2 — 2023-11-12
- 2.0.1 — 2022-04-20
- 2.0.0 — 2022-01-19
- 1.0.2 — 2019-10-27
- 1.0.1 — 2019-10-22
- 1.0.0 — 2019-10-22
- 0.0.1 — 2019-10-22

## README

# Loading Buttons

CSS for button that loads. check https://loading.io/button/ for more information.

# usage

install with npm:

    npm install --save ldbutton

include required css file ( you may also need loading.css for spinner related css ):

    <link rel="stylesheet" type="text/css" href="path-to-ldbutton-css-file"/>


add class for one of the desired effect to your button, along with a loader inside:

    <div class="btn btn-primary ld-ext-right">
      <div class="ld ld-ball ld-bounce"></div>
    </div>

  - The *ld-ball* and *ld-bounce* classes used here are from [loading.css](https://loading.io/animation/). You can use your own animation.
  - The class *ld* is required for loading buttons to identify the loader element.

3. Trigger the loading animation by adding "running" class in the button:

    <div class="btn btn-primary ld-ext-right running">
      <div class="ld ld-ball ld-bounce"></div>
    </div>
 
You can also use [ldloader](https://loading.io/lib/loader/) to manipulate loader's state.

For more information about how to use loading buttons, please check the [online documentation here](https://loading.io/button/).


# License

MIT.

---
_Source: https://npm.io/package/ldbutton · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._