{"id":19454,"date":"2014-03-04T15:01:14","date_gmt":"2014-03-04T07:01:14","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19454"},"modified":"2025-04-04T01:42:39","modified_gmt":"2025-04-03T17:42:39","slug":"loading-effect-in-buttons-ladda","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/","title":{"rendered":"Integrating LADDA for Engaging Loading Effects in Buttons"},"content":{"rendered":"

Webpages can be brought to life with various animations, from animated text<\/a> and modal boxes<\/a> to transitions<\/a> and progress indicators<\/a>. Progress indicators, often bars, visually display the extent of progress made. If you\u2019re intrigued by incorporating progress indicators within buttons, explore Ladda<\/a>.<\/p>\n

Ladda<\/a>, crafted by Hakim El Hattab<\/a>, is a jQuery plugin that introduces a loading effect within buttons<\/strong>. This UI concept bridges the gap between action and feedback, offering users a loading indicator directly in the button, eliminating the need to navigate away from the page. A WordPress version of Ladda<\/a> is also available.<\/p>\n

Getting Started<\/h2>\n

To use Ladda, begin by incorporating the ladda.min.js<\/strong> and spin.min.js<\/strong> files from its GitHub page<\/a> into your project as follows:<\/p>\n

\r\n <script src=\"js\/spin.min.js\"><\/script> \r\n <script src=\"js\/ladda.min.js\"><\/script>\r\n<\/pre>\n
Next, to apply Ladda\u2019s default themes to your buttons, include the ladda.min.css<\/strong> file. For function-only buttons without the themes, use ladda-themeless.min.css<\/strong> instead.<\/p>\n
\r\n <link rel=\"stylesheet\" href=\"dist\/ladda.min.css\">\r\n<\/pre>\n
Setting Up Your Button<\/h2>\n
To integrate Ladda\u2019s loading effect into your buttons, simply add the ladda-button<\/code> class to your button element. Here\u2019s how you can do it:<\/p>\n
\r\n <button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"xl\">Submit<\/button>\r\n<\/pre>\n
Beyond just integrating Ladda, you can customize your button\u2019s appearance and behavior through data attributes. The data-style<\/code> attribute, for example, defines the animation style. Discover all available styles on the demo page<\/a>.<\/p>\n
For more customization, use data-color<\/code> to alter the button\u2019s color and data-size<\/code> to adjust its size to your preference.<\/p>\n
\"Example<\/figure>\n
Integrating with Server Actions<\/h2>\n
To link the loading animation with server submissions (which reloads the page post-animation), we use the bind()<\/code> method. This method connects the progress buttons to simulate the loading process:<\/p>\n
\r\n<script>\r\nLadda.bind('button', {\r\n  callback: function(instance) {\r\n    var progress = 0;\r\n    var interval = setInterval(function() {\r\n      progress = Math.min(progress + Math.random() * 0.1, 1);\r\n      instance.setProgress(progress);\r\n\r\n      if(progress === 1) {\r\n        instance.stop();\r\n        clearInterval(interval);\r\n      }\r\n    }, 200);\r\n  }\r\n});\r\n<\/script>\r\n<\/pre>\n
You can also manage your buttons dynamically using JavaScript API as follows:<\/p>\n
\r\n<script>\r\n\tvar l = Ladda.create(document.querySelector('button'));\r\n\tl.start();\r\n\tl.stop();\r\n\tl.toggle();\r\n\tl.isLoading();\r\n\tl.setProgress(0-1);\r\n<\/script>\r\n<\/pre>\n
Wrapping It Up<\/h2>\n
Ladda, with its compatibility with Bootstrap and responsive design, is a strong candidate for enhancing your projects. It performs flawlessly in modern browsers like Chrome, Firefox, Safari, as well as IE9 and onwards. We\u2019re eager to hear your thoughts<\/strong>, so drop us a comment below.<\/p>","protected":false},"excerpt":{"rendered":"
Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators, often bars, visually display the extent of progress made. If you\u2019re intrigued by incorporating progress indicators within buttons, explore Ladda. Ladda, crafted by Hakim El Hattab, is a jQuery plugin that introduces a…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[298,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nIntegrating LADDA for Engaging Loading Effects in Buttons - Hongkiat<\/title>\n<meta name=\"description\" content=\"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating LADDA for Engaging Loading Effects in Buttons\" \/>\n<meta property=\"og:description\" content=\"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-04T07:01:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:42:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Integrating LADDA for Engaging Loading Effects in Buttons\",\"datePublished\":\"2014-03-04T07:01:14+00:00\",\"dateModified\":\"2025-04-03T17:42:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/\"},\"wordCount\":321,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/loading-effect-in-buttons-ladda\\\/demo-result.png\",\"keywords\":[\"Buttons\",\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/\",\"name\":\"Integrating LADDA for Engaging Loading Effects in Buttons - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/loading-effect-in-buttons-ladda\\\/demo-result.png\",\"datePublished\":\"2014-03-04T07:01:14+00:00\",\"dateModified\":\"2025-04-03T17:42:39+00:00\",\"description\":\"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/loading-effect-in-buttons-ladda\\\/demo-result.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/loading-effect-in-buttons-ladda\\\/demo-result.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/loading-effect-in-buttons-ladda\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrating LADDA for Engaging Loading Effects in Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Integrating LADDA for Engaging Loading Effects in Buttons - Hongkiat","description":"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/","og_locale":"en_US","og_type":"article","og_title":"Integrating LADDA for Engaging Loading Effects in Buttons","og_description":"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,","og_url":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-04T07:01:14+00:00","article_modified_time":"2025-04-03T17:42:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Integrating LADDA for Engaging Loading Effects in Buttons","datePublished":"2014-03-04T07:01:14+00:00","dateModified":"2025-04-03T17:42:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/"},"wordCount":321,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png","keywords":["Buttons","Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/","url":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/","name":"Integrating LADDA for Engaging Loading Effects in Buttons - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png","datePublished":"2014-03-04T07:01:14+00:00","dateModified":"2025-04-03T17:42:39+00:00","description":"Webpages can be brought to life with various animations, from animated text and modal boxes to transitions and progress indicators. Progress indicators,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/loading-effect-in-buttons-ladda\/demo-result.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/loading-effect-in-buttons-ladda\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Integrating LADDA for Engaging Loading Effects in Buttons"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-53M","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19454"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19454\/revisions"}],"predecessor-version":[{"id":73662,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19454\/revisions\/73662"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19454"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}