Ladda Deployment & Usage Guide

1. Prerequisites

Node.js (v12.x or newer) and npm (v6.x or newer)
Git (to clone the repository)
A module bundler for production use (Rollup, Webpack, or Parcel) – required because Ladda 2.x is distributed as an ES6 module
For running the demo site locally: a local HTTP server (e.g., serve, http-server, or Python's http.server)

2. Installation

Using Ladda as a library in your project

npm install ladda

Cloning and setting up the project repository

git clone https://github.com/hakimel/Ladda.git
cd Ladda
npm install

This installs both runtime dependencies (like spin.js) and development dependencies (like rollup).

3. Configuration

Ladda does not use a traditional configuration file. Instead, configure individual buttons via HTML data-* attributes:

Attribute	Options / Description	Required?
`data-style`	`expand-left`, `expand-right`, `expand-up`, `expand-down`, `contract`, `contract-overlay`, `zoom-in`, `zoom-out`, `slide-left`, `slide-right`, `slide-up`, `slide-down`	Yes
`data-color`	`green`, `red`, `blue`, `purple`, `mint`	No
`data-size`	`xs`, `s`, `l`, `xl` (default: medium)	No
`data-spinner-size`	Pixel dimensions (e.g., `20`)	No
`data-spinner-color`	Any CSS color (hex, named) – default: `#fff`	No
`data-spinner-lines`	Number of spinner lines (default: `12`)	No

When using Ladda.bind() in JavaScript, you can pass an options object:

timeout: Milliseconds after which to automatically stop loading.
callback: Function executed on each animation frame (useful for progress simulation).

4. Build & Run

Building the demo bundles

The project includes a Rollup configuration (rollup.config.js) that bundles the demo JavaScript files:

npx rollup -c

This creates:

site/dist/index-bundle.js (from site/index.js)
site/dist/form-bundle.js (from site/form.js)

Running the demo site locally

Serve the site directory with a local HTTP server:

# Using npx (recommended)
npx serve site

Or with Python:

cd site
python -m http.server 8000

Open http://localhost:5000 (or :8000) in a browser to view the demo.

Using Ladda in your own project

Import the module in your JavaScript:
```
import * as Ladda from 'ladda';
```

Include one of the CSS files from the dist directory in your HTML:

<!-- For styled buttons (as in demo) -->
<link rel="stylesheet" href="node_modules/ladda/dist/ladda.min.css">
<!-- OR for themeless (functional only) -->
<link rel="stylesheet" href="node_modules/ladda/dist/ladda-themeless.min.css">

Bundle your code with Rollup/Webpack/Parcel for production.

5. Deployment

Publishing the library to npm

If you are maintaining a fork or updating the library:

Update the version in package.json.
Ensure you are logged into npm (npm login).
Run:
```
npm publish
```

Deploying an application that uses Ladda

Bundle your application with a module bundler (Rollup, Webpack, Parcel), including Ladda as a dependency. For production, minify the output (e.g., using terser with Rollup).
Deploy the static assets (HTML, CSS, bundled JS) to any static hosting service:
- GitHub Pages: Push to gh-pages branch or use the docs folder.
- Netlify/Vercel: Connect your repository; they auto-detect and build.
- AWS S3 + CloudFront: Upload files to an S3 bucket and serve via CloudFront.
Ensure your server serves the correct MIME types for JavaScript (`

How to Deploy & Use hakimel/Ladda