{"id":13407122,"url":"https://github.com/hakimel/Ladda","last_synced_at":"2025-03-14T11:31:01.293Z","repository":{"id":8803328,"uuid":"10498249","full_name":"hakimel/Ladda","owner":"hakimel","description":"Buttons with built-in loading indicators.","archived":false,"fork":false,"pushed_at":"2021-12-02T21:28:53.000Z","size":345,"stargazers_count":7841,"open_issues_count":9,"forks_count":863,"subscribers_count":203,"default_branch":"master","last_synced_at":"2025-03-13T09:01:42.307Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lab.hakim.se/ladda/","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/hakimel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-05T08:30:13.000Z","updated_at":"2025-03-12T22:35:48.000Z","dependencies_parsed_at":"2022-07-12T15:03:16.098Z","dependency_job_id":null,"html_url":"https://github.com/hakimel/Ladda","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakimel%2FLadda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakimel%2FLadda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakimel%2FLadda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakimel%2FLadda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hakimel","download_url":"https://codeload.github.com/hakimel/Ladda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243569321,"owners_count":20312402,"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":[],"created_at":"2024-07-30T20:00:22.064Z","updated_at":"2025-03-14T11:31:01.262Z","avatar_url":"https://github.com/hakimel.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","HTML","JavaScript","Loading Status","Javascript","UI","others","Loading Status [🔝](#readme)","加载状态"],"sub_categories":["Uncategorized","Runner","运行器","运行器e2e测试"],"readme":"# Ladda\n\nButtons with built-in loading indicators, effectively bridging the gap between action and feedback.\n\n[Check out the demo page](https://lab.hakim.se/ladda/).\n\n## Installation\n\n`npm install ladda`\n\n### Module bundling\n\nLadda 2.x is distributed as a standard ES6 module. Since not all browsers/environments support native\nES6 modules, it is recommended to use a bundler such as \u003ca href=\"https://rollupjs.org/\"\u003eRollup\u003c/a\u003e,\n\u003ca href=\"https://parceljs.org/\"\u003eParcel\u003c/a\u003e, or \u003ca href=\"https://webpack.js.org/\"\u003eWebpack\u003c/a\u003e to create\na production-ready code bundle.\n\n## Usage\n\n### CSS\n\nYou will need to include ONE of the two style sheets in the **/dist** directory.\nIf you want the button styles used on the demo page, use the **ladda.min.css** file.\nIf you want to have the functional buttons without the visual style (colors, padding, etc.),\nuse the **ladda-themeless.min.css** file.\n\n### HTML\n\nBelow is an example of a button using the `expand-right` animation style.\n\n```html\n\u003cbutton class=\"ladda-button\" data-style=\"expand-right\"\u003eSubmit\u003c/button\u003e\n```\n\nWhen the JS code runs to bind Ladda to the button, the `ladda-button` class\nwill be automatically added if it doesn't already exist. Additionally, a span\nwith class `ladda-label` will automatically wrap the button text, resulting\nin the following DOM structure:\n\n```html\n\u003cbutton class=\"ladda-button\" data-style=\"expand-right\"\u003e\n    \u003cspan class=\"ladda-label\"\u003eSubmit\u003c/span\u003e\n\u003c/button\u003e\n```\n\nButtons accept the following attributes:\n- **data-style**: one of the button styles *[required]*\n  - expand-left, expand-right, expand-up, expand-down\n  - contract, contract-overlay\n  - zoom-in, zoom-out\n  - slide-left, slide-right, slide-up, slide-down\n- **data-color**: green/red/blue/purple/mint\n- **data-size**: xs/s/l/xl, defaults to medium\n- **data-spinner-size**: pixel dimensions of spinner, defaults to dynamic size based on the button height\n- **data-spinner-color**: a hex code or any named CSS color, defaults to `#fff`\n- **data-spinner-lines**: the number of lines for the spinner, defaults to `12`\n\n### JavaScript\n\nStart by importing the Ladda module:\n\n```javascript\nimport * as Ladda from 'ladda';\n```\n\nThe following approach is recommended for JavaScript control over your buttons:\n\n```javascript\n// Create a new instance of ladda for the specified button\nvar l = Ladda.create(document.querySelector('.my-button'));\n\n// Start loading\nl.start();\n\n// Will display a progress bar for 50% of the button width\nl.setProgress(0.5);\n\n// Stop loading\nl.stop();\n\n// Toggle between loading/not loading states\nl.toggle();\n\n// Check the current state\nl.isLoading();\n\n// Delete the button's ladda instance\nl.remove();\n```\n\nTo show the loading animation for a form that is submitted to the server\n(always resulting in a page reload) the `bind()` method can be used:\n\n```javascript\n// Automatically trigger the loading animation on click\nLadda.bind('button[type=submit]');\n\n// Same as the above but automatically stops after two seconds\nLadda.bind('button[type=submit]', {timeout: 2000});\n```\n\nNote: when using the `bind()` method on buttons that are inside a form,\nloading indicators will not be shown until the form is valid.\n\nAll loading animations on the page can be stopped by using:\n\n```javascript\nLadda.stopAll();\n```\n\n## Browser support\n\nLadda has been tested in Firefox, Microsoft Edge, Chrome, and Internet Explorer 11.\nIt also Should Work™ in Safari and Internet Explorer 10.\n\n## Changelog\n\n\u003chttps://github.com/hakimel/Ladda/blob/master/CHANGELOG.md\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakimel%2FLadda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhakimel%2FLadda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakimel%2FLadda/lists"}