{"id":13507379,"url":"https://github.com/msurguy/ladda-bootstrap","last_synced_at":"2025-10-01T20:32:05.458Z","repository":{"id":10504178,"uuid":"12689343","full_name":"msurguy/ladda-bootstrap","owner":"msurguy","description":"Ladda buttons concept originally by @hakimel, example using Bootstrap 3 by @msurguy","archived":true,"fork":false,"pushed_at":"2017-12-31T21:12:36.000Z","size":94,"stargazers_count":1234,"open_issues_count":25,"forks_count":251,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-01-15T06:01:06.529Z","etag":null,"topics":["bootstrap","bootstrap3","ladda","spinner"],"latest_commit_sha":null,"homepage":"http://msurguy.github.io/ladda-bootstrap/","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/msurguy.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}},"created_at":"2013-09-08T23:24:54.000Z","updated_at":"2024-10-30T10:31:03.000Z","dependencies_parsed_at":"2022-09-09T12:02:41.649Z","dependency_job_id":null,"html_url":"https://github.com/msurguy/ladda-bootstrap","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurguy%2Fladda-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurguy%2Fladda-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurguy%2Fladda-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msurguy%2Fladda-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msurguy","download_url":"https://codeload.github.com/msurguy/ladda-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234897368,"owners_count":18903646,"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":["bootstrap","bootstrap3","ladda","spinner"],"created_at":"2024-08-01T02:00:32.559Z","updated_at":"2025-10-01T20:32:05.125Z","avatar_url":"https://github.com/msurguy.png","language":"JavaScript","readme":"# Project INACTIVE\n\nThere is now no need to maintain this project as Ladda operates well on its own with Bootstrap and demo pages could be found in the original Ladda repository: https://github.com/hakimel/Ladda/tree/master/test \n\n# Ladda for Bootstrap 3\n\nButtons with built-in loading indicators, effectively bridging the gap between action and feedback. \n\n[Check out the demo page](http://msurguy.github.io/ladda-bootstrap/).\n\n## Instructions\n\nPlease see the demo page for the details: (http://msurguy.github.io/ladda-bootstrap/).\n\n#### HTML\n\nLadda buttons must be given the class ```ladda-button``` and the button label needs to have the ```ladda-label``` class. The ```ladda-label``` will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style.\n\n```html\n\u003cbutton class=\"ladda-button\" data-style=\"expand-right\"\u003e\u003cspan class=\"ladda-label\"\u003eSubmit\u003c/span\u003e\u003c/button\u003e\n```\n\nButtons accepts three attributes:\n- **data-style**: one of the button styles, full list in [demo](http://lab.hakim.se/ladda/) *[required]*\n- **data-color**: green/red/blue/purple/mint\n- **data-size**: xs/s/l/xl, defaults to medium\n- **data-spinner-size**: 40, 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](http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/). \n\n#### JavaScript\n\nIf you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the ```bind()``` method:\n\n```javascript\n// Automatically trigger the loading animation on click\nLadda.bind( 'input[type=submit]' );\n\n// Same as the above but automatically stops after two seconds\nLadda.bind( 'input[type=submit]', { timeout: 2000 } );\n```\n\nIf you want JavaScript control over your buttons you can use the following approach:\n\n```javascript\n// Create a new instance of ladda for the specified button\n// Please note that this must be done after the button has been\n// added to the DOM.\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\nAll loading animations on the page can be stopped by using:\n\n```javascript\nLadda.stopAll();\n```\n\n## Browser support\n\nThe project is tested in Chrome and Firefox. It Should Work™ in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up.\n\n## License\n\nMIT licensed\n\nCopyright (C) 2013 Hakim El Hattab, http://hakim.se\n","funding_links":[],"categories":["JavaScript","add-ons"],"sub_categories":["buttons"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsurguy%2Fladda-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsurguy%2Fladda-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsurguy%2Fladda-bootstrap/lists"}