From 3ff018f70ea5251a3144b3e66b81f7e40c14a3e5 Mon Sep 17 00:00:00 2001
From: MohammadMir <mohammadmir9891@gmail.com>
Date: Sat, 19 Dec 2020 19:14:12 +0330
Subject: [PATCH 1/5] Success and Failure methods added.

---
 css/ladda.scss | 34 ++++++++++++++++++++
 js/ladda.d.ts  |  2 ++
 js/ladda.js    | 86 ++++++++++++++++++++++++++++++++++++++++++++++++--
 site/index.js  |  7 +++-
 4 files changed, 126 insertions(+), 3 deletions(-)

diff --git a/css/ladda.scss b/css/ladda.scss
index 3622ebc0..9d5c6fda 100644
--- a/css/ladda.scss
+++ b/css/ladda.scss
@@ -86,6 +86,35 @@ $spinnerSize: 32px !default;
     display: block;
 }
 
+/* Showing Result */
+.ladda-button .ladda-successful{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background:#008000;
+    display: none;
+}
+
+.ladda-button[data-success] .ladda-successful {
+    display: block;
+}
+
+.ladda-button .ladda-failed {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #e63946;
+    display: none;
+}
+
+.ladda-button[data-failed] .ladda-failed {
+    display: block;
+}
+
 
 /*************************************
  * EASING
@@ -446,6 +475,11 @@ $spinnerSize: 32px !default;
             opacity: 1;
         }
     }
+
+    &[data-success], &[data-failed] {
+        border-radius: 50%;
+        width: 52px;
+    }
 }
 
 
diff --git a/js/ladda.d.ts b/js/ladda.d.ts
index 079bdc24..dcc2b724 100644
--- a/js/ladda.d.ts
+++ b/js/ladda.d.ts
@@ -6,6 +6,8 @@ export interface LaddaButton {
     setProgress(progress: number): void,
     isLoading(): boolean,
     remove(): void,
+    loadSuccessful(permanentResult: boolean, timeout: number): LaddaButton,
+    loadFailed(permanentResult: boolean, timeout: number): LaddaButton,
 }
 
 export interface BindOptions {
diff --git a/js/ladda.js b/js/ladda.js
index 022722bd..cf82ea58 100644
--- a/js/ladda.js
+++ b/js/ladda.js
@@ -36,8 +36,9 @@ export function create(button) {
 
     // The text contents must be wrapped in a ladda-label
     // element, create one if it doesn't already exist
-    if (!button.querySelector('.ladda-label')) {
-        var laddaLabel = document.createElement('span');
+    var laddaLabel = button.querySelector('.ladda-label');
+    if (!laddaLabel) {
+        laddaLabel = document.createElement('span');
         laddaLabel.className = 'ladda-label';
         wrapContent(button, laddaLabel);
     }
@@ -156,6 +157,87 @@ export function create(button) {
             }
 
             ALL_INSTANCES.splice(ALL_INSTANCES.indexOf(instance), 1);
+        },
+
+        /**
+         * This method will stop the progress and then change the color of the button to green and show the check mark.
+         * @param {boolean} permanentResult 
+         * Default value is TRUE.
+         * If set to true the button will stay disabled and the color stays green after the progress stops
+         * also you can detemine a time in milliseconds to turn the button to the default state.
+         * @param {number} timeout 
+         * Default value is 1000 milliseconds = 1 second.
+         * The time in milliseconds that will return the button to its default state.
+         */
+        loadSuccessful: function(permanentResult = true, timeout = 1000){
+            instance.stop();
+            button.disabled = true;
+
+            var resElement = button.querySelector('.ladda-successful');
+            if(!resElement){
+                resElement = document.createElement('div');
+                resElement.className = 'ladda-successful';
+                button.appendChild(resElement);
+            }
+
+            var labelEle = document.createElement('span');
+            labelEle.className = 'ladda-label';
+            labelEle.textContent = '✔';
+            button.appendChild(labelEle);
+
+            laddaLabel.style.display = 'none';
+            button.setAttribute('data-success', '');
+
+            if(!permanentResult){
+                setTimeout(() => {
+                    button.removeAttribute('data-success');
+                    button.disabled = false;
+                    laddaLabel.style.display = 'block';
+                    button.removeChild(labelEle);
+                }, timeout);
+            }
+
+            return this;    //chain
+        },
+        
+        /**
+         * @param {boolean} permanentResult
+         * Default value is TRUE.
+         * If set to true the button will stay disabled and the color stays green after the progress stops
+         * also you can detemine a time in milliseconds to turn the button to the default state.
+         * @param {number} timeout
+         * Default value is 1000 milliseconds = 1 second.
+         * The time in milliseconds that will return the button to its default state.
+         */
+        loadFailed: function(permanentResult = true, timeout = 1000){
+            instance.stop();
+            button.disabled = true;
+            
+            var resElement = button.querySelector('.ladda-failed');
+            if(!resElement){
+                resElement = document.createElement('div');
+                resElement.className = 'ladda-failed';
+                button.appendChild(resElement);
+            }
+            
+            button.setAttribute('data-failed', '');
+            
+            var labelEle = document.createElement('span');
+            labelEle.className = 'ladda-label';
+            button.appendChild(labelEle);
+            labelEle.innerHTML = '✘';
+
+            laddaLabel.style.display = 'none';
+
+            if(!permanentResult){
+                setTimeout(() => {
+                    button.removeAttribute('data-failed');
+                    button.disabled = false;
+                    laddaLabel.style.display = 'block';
+                    button.removeChild(labelEle);
+                }, timeout);
+            }
+            return this;    //chain
         }
     };
 
diff --git a/site/index.js b/site/index.js
index 8d2fb6d4..10f8c1f4 100644
--- a/site/index.js
+++ b/site/index.js
@@ -12,7 +12,10 @@ Ladda.bind('.progress-demo button', {
             instance.setProgress(progress);
 
             if (progress === 1) {
-                instance.stop();
+                // instance.stop();
+
+                Math.random() > 0.5 ? instance.loadSuccessful() : instance.loadFailed(false);
+                
                 clearInterval(interval);
             }
         }, 200);
@@ -25,6 +28,8 @@ Ladda.bind('.progress-demo button', {
 // var l = Ladda.create( document.querySelector( 'button' ) );
 // l.start();
 // l.stop();
+// l.loadSuccessful( boolean, number);
+// l.loadFailed( boolean, number);
 // l.toggle();
 // l.isLoading();
 // l.setProgress( 0-1 );

From 9b35158c8d996c7c429302710fe529a4e88b09c6 Mon Sep 17 00:00:00 2001
From: MohammadMir <mohammadmir9891@gmail.com>
Date: Sat, 19 Dec 2020 19:20:02 +0330
Subject: [PATCH 2/5] Success and Failure methods added.

---
 js/ladda.d.ts | 4 ++--
 js/ladda.js   | 4 ++--
 site/index.js | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/ladda.d.ts b/js/ladda.d.ts
index dcc2b724..ce3fb2ed 100644
--- a/js/ladda.d.ts
+++ b/js/ladda.d.ts
@@ -6,8 +6,8 @@ export interface LaddaButton {
     setProgress(progress: number): void,
     isLoading(): boolean,
     remove(): void,
-    loadSuccessful(permanentResult: boolean, timeout: number): LaddaButton,
-    loadFailed(permanentResult: boolean, timeout: number): LaddaButton,
+    loadingSuccessful(permanentResult: boolean, timeout: number): LaddaButton,
+    loadingFailed(permanentResult: boolean, timeout: number): LaddaButton,
 }
 
 export interface BindOptions {
diff --git a/js/ladda.js b/js/ladda.js
index cf82ea58..d473cbc6 100644
--- a/js/ladda.js
+++ b/js/ladda.js
@@ -169,7 +169,7 @@ export function create(button) {
          * Default value is 1000 milliseconds = 1 second.
          * The time in milliseconds that will return the button to its default state.
          */
-        loadSuccessful: function(permanentResult = true, timeout = 1000){
+        loadingSuccessful: function(permanentResult = true, timeout = 1000){
             instance.stop();
             button.disabled = true;
 
@@ -209,7 +209,7 @@ export function create(button) {
          * Default value is 1000 milliseconds = 1 second.
          * The time in milliseconds that will return the button to its default state.
          */
-        loadFailed: function(permanentResult = true, timeout = 1000){
+        loadingFailed: function(permanentResult = true, timeout = 1000){
             instance.stop();
             button.disabled = true;
             
diff --git a/site/index.js b/site/index.js
index 10f8c1f4..b6c13c78 100644
--- a/site/index.js
+++ b/site/index.js
@@ -14,7 +14,7 @@ Ladda.bind('.progress-demo button', {
             if (progress === 1) {
                 // instance.stop();
 
-                Math.random() > 0.5 ? instance.loadSuccessful() : instance.loadFailed(false);
+                Math.random() > 0.5 ? instance.loadingSuccessful(false, 2000) : instance.loadingFailed(false);
                 
                 clearInterval(interval);
             }
@@ -28,8 +28,8 @@ Ladda.bind('.progress-demo button', {
 // var l = Ladda.create( document.querySelector( 'button' ) );
 // l.start();
 // l.stop();
-// l.loadSuccessful( boolean, number);
-// l.loadFailed( boolean, number);
+// l.loadingSuccessful( boolean, number);
+// l.loadingFailed( boolean, number);
 // l.toggle();
 // l.isLoading();
 // l.setProgress( 0-1 );

From 6ba452527d8da074c41ff02bdfdb971f176a06c6 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Thu, 24 Dec 2020 23:17:38 -0600
Subject: [PATCH 3/5] Simplify success/fail API and reset status when
 starting/stopping the spinner

---
 .gitignore            |   1 +
 .npmrc                |   1 -
 css/ladda-themed.scss |  13 +-
 css/ladda.scss        |  34 +---
 js/ladda.d.ts         |   4 +-
 js/ladda.js           | 422 +++++++++++++++++++++---------------------
 site/index.js         |   8 +-
 7 files changed, 225 insertions(+), 258 deletions(-)
 delete mode 100644 .npmrc

diff --git a/.gitignore b/.gitignore
index 0ec1aa20..99c869f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /node_modules/
 /dist/
 /site/dist/
+/package-lock.json
diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index 43c97e71..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/css/ladda-themed.scss b/css/ladda-themed.scss
index 050b999c..806548e7 100644
--- a/css/ladda-themed.scss
+++ b/css/ladda-themed.scss
@@ -34,7 +34,7 @@ $mint: #16a085;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    &:hover {
+    &:hover:not([data-failed]):not([data-success]) {
         border-color: rgba( 0, 0, 0, 0.07 );
         background-color: #888;
     }
@@ -45,14 +45,13 @@ $mint: #16a085;
     @include buttonColor( 'purple', $purple );
     @include buttonColor( 'mint', $mint );
 
-    &[disabled],
-    &[data-loading] {
+    &[disabled], &[data-loading] {
         border-color: rgba( 0, 0, 0, 0.07 );
+        cursor: default;
+    }
 
-        &, &:hover {
-            cursor: default;
-            background-color: #999;
-        }
+    &[disabled]:not([data-failed]):not([data-success]), &[data-loading] {
+        background-color: #999;
     }
 
     &[data-size=xs] {
diff --git a/css/ladda.scss b/css/ladda.scss
index 9d5c6fda..b5d44a2b 100644
--- a/css/ladda.scss
+++ b/css/ladda.scss
@@ -19,11 +19,11 @@ $spinnerSize: 32px !default;
  */
 
 @mixin buttonColor( $name, $color ) {
-    &[data-color=#{$name}] {
+    &[data-color=#{$name}]:not([data-failed]):not([data-success]) {
         background: $color;
 
-        &:hover {
-            background-color: lighten( $color, 5% );
+        &:hover:not([data-loading]):not([data-failed]):not([data-success]) {
+            background: lighten( $color, 5% );
         }
     }
 }
@@ -86,36 +86,14 @@ $spinnerSize: 32px !default;
     display: block;
 }
 
-/* Showing Result */
-.ladda-button .ladda-successful{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background:#008000;
-    display: none;
-}
-
-.ladda-button[data-success] .ladda-successful {
-    display: block;
-}
-
-.ladda-button .ladda-failed {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
+.ladda-button[data-failed] {
     background: #e63946;
-    display: none;
 }
 
-.ladda-button[data-failed] .ladda-failed {
-    display: block;
+.ladda-button[data-success] {
+    background:#008000;
 }
 
-
 /*************************************
  * EASING
  */
diff --git a/js/ladda.d.ts b/js/ladda.d.ts
index ce3fb2ed..492a3020 100644
--- a/js/ladda.d.ts
+++ b/js/ladda.d.ts
@@ -6,8 +6,8 @@ export interface LaddaButton {
     setProgress(progress: number): void,
     isLoading(): boolean,
     remove(): void,
-    loadingSuccessful(permanentResult: boolean, timeout: number): LaddaButton,
-    loadingFailed(permanentResult: boolean, timeout: number): LaddaButton,
+    succeed(timeout: number = 1250): LaddaButton,
+    fail(timeout: number = 1250): LaddaButton,
 }
 
 export interface BindOptions {
diff --git a/js/ladda.js b/js/ladda.js
index d473cbc6..c770dff2 100644
--- a/js/ladda.js
+++ b/js/ladda.js
@@ -12,11 +12,9 @@ import {Spinner} from 'spin.js';
 var ALL_INSTANCES = [];
 
 /**
- * Creates a new instance of Ladda which wraps the
- * target button element.
- *
- * @return An API object that can be used to control
- * the loading animation state.
+ * Creates a new instance of Ladda which wraps the target button element.
+ * @param {HTMLElement} button
+ * @return An API object that can be used to control the loading animation state.
  */
 export function create(button) {
     if (typeof button === 'undefined') {
@@ -34,221 +32,14 @@ export function create(button) {
         button.setAttribute('data-style', 'expand-right');
     }
 
-    // The text contents must be wrapped in a ladda-label
-    // element, create one if it doesn't already exist
-    var laddaLabel = button.querySelector('.ladda-label');
-    if (!laddaLabel) {
-        laddaLabel = document.createElement('span');
-        laddaLabel.className = 'ladda-label';
-        wrapContent(button, laddaLabel);
-    }
-
-    // The spinner component
-    var spinnerWrapper = button.querySelector('.ladda-spinner');
-
-    // Wrapper element for the spinner
-    if (!spinnerWrapper) {
-        spinnerWrapper = document.createElement('span');
-        spinnerWrapper.className = 'ladda-spinner';
-    }
-
-    button.appendChild(spinnerWrapper);
-
-    // Timer used to delay starting/stopping
-    var timer;
-    var spinner;
-
-    var instance = {
-        /**
-         * Enter the loading state.
-         */
-        start: function() {
-            // Create the spinner if it doesn't already exist
-            if (!spinner) {
-                spinner = createSpinner(button);
-            }
-
-            button.disabled = true;
-            button.setAttribute('data-loading', '');
-
-            clearTimeout(timer);
-            spinner.spin(spinnerWrapper);
-
-            this.setProgress(0);
-
-            return this; // chain
-        },
-
-        /**
-         * Enter the loading state, after a delay.
-         */
-        startAfter: function(delay) {
-            clearTimeout(timer);
-            timer = setTimeout(function() { instance.start(); }, delay);
-
-            return this; // chain
-        },
-
-        /**
-         * Exit the loading state.
-         */
-        stop: function() {
-            if (instance.isLoading()) {
-                button.disabled = false;
-                button.removeAttribute('data-loading');   
-            }
-
-            // Kill the animation after a delay to make sure it
-            // runs for the duration of the button transition
-            clearTimeout(timer);
-
-            if (spinner) {
-                timer = setTimeout(function() { spinner.stop(); }, 1000);
-            }
-
-            return this; // chain
-        },
-
-        /**
-         * Toggle the loading state on/off.
-         */
-        toggle: function() {
-            return this.isLoading() ? this.stop() : this.start();
-        },
-
-        /**
-         * Sets the width of the visual progress bar inside of
-         * this Ladda button
-         *
-         * @param {number} progress in the range of 0-1
-         */
-        setProgress: function(progress) {
-            // Cap it
-            progress = Math.max(Math.min(progress, 1), 0);
-
-            var progressElement = button.querySelector('.ladda-progress');
-
-            // Remove the progress bar if we're at 0 progress
-            if (progress === 0 && progressElement && progressElement.parentNode) {
-                progressElement.parentNode.removeChild(progressElement);
-            } else {
-                if (!progressElement) {
-                    progressElement = document.createElement('div');
-                    progressElement.className = 'ladda-progress';
-                    button.appendChild(progressElement);
-                }
-
-                progressElement.style.width = ((progress || 0) * button.offsetWidth) + 'px';
-            }
-        },
-
-        isLoading: function() {
-            return button.hasAttribute('data-loading');
-        },
-
-        remove: function() {
-            clearTimeout(timer);
-            button.disabled = false;
-            button.removeAttribute('data-loading');
-
-            if (spinner) {
-                spinner.stop();
-                spinner = null;
-            }
-
-            ALL_INSTANCES.splice(ALL_INSTANCES.indexOf(instance), 1);
-        },
-
-        /**
-         * This method will stop the progress and then change the color of the button to green and show the check mark.
-         * @param {boolean} permanentResult 
-         * Default value is TRUE.
-         * If set to true the button will stay disabled and the color stays green after the progress stops
-         * also you can detemine a time in milliseconds to turn the button to the default state.
-         * @param {number} timeout 
-         * Default value is 1000 milliseconds = 1 second.
-         * The time in milliseconds that will return the button to its default state.
-         */
-        loadingSuccessful: function(permanentResult = true, timeout = 1000){
-            instance.stop();
-            button.disabled = true;
-
-            var resElement = button.querySelector('.ladda-successful');
-            if(!resElement){
-                resElement = document.createElement('div');
-                resElement.className = 'ladda-successful';
-                button.appendChild(resElement);
-            }
-
-            var labelEle = document.createElement('span');
-            labelEle.className = 'ladda-label';
-            labelEle.textContent = '✔';
-            button.appendChild(labelEle);
-
-            laddaLabel.style.display = 'none';
-            button.setAttribute('data-success', '');
-
-            if(!permanentResult){
-                setTimeout(() => {
-                    button.removeAttribute('data-success');
-                    button.disabled = false;
-                    laddaLabel.style.display = 'block';
-                    button.removeChild(labelEle);
-                }, timeout);
-            }
-
-            return this;    //chain
-        },
-        
-        /**
-         * @param {boolean} permanentResult
-         * Default value is TRUE.
-         * If set to true the button will stay disabled and the color stays green after the progress stops
-         * also you can detemine a time in milliseconds to turn the button to the default state.
-         * @param {number} timeout
-         * Default value is 1000 milliseconds = 1 second.
-         * The time in milliseconds that will return the button to its default state.
-         */
-        loadingFailed: function(permanentResult = true, timeout = 1000){
-            instance.stop();
-            button.disabled = true;
-            
-            var resElement = button.querySelector('.ladda-failed');
-            if(!resElement){
-                resElement = document.createElement('div');
-                resElement.className = 'ladda-failed';
-                button.appendChild(resElement);
-            }
-            
-            button.setAttribute('data-failed', '');
-            
-            var labelEle = document.createElement('span');
-            labelEle.className = 'ladda-label';
-            button.appendChild(labelEle);
-            labelEle.innerHTML = '✘';
-
-            laddaLabel.style.display = 'none';
-
-            if(!permanentResult){
-                setTimeout(() => {
-                    button.removeAttribute('data-failed');
-                    button.disabled = false;
-                    laddaLabel.style.display = 'block';
-                    button.removeChild(labelEle);
-                }, timeout);
-            }
-            return this;    //chain
-        }
-    };
-
+    var instance = new LaddaButton(button);
     ALL_INSTANCES.push(instance);
 
     return instance;
 }
 
 /**
- * Binds the target buttons to automatically enter the
- * loading state when clicked.
+ * Binds the target buttons to automatically enter the loading state when clicked.
  *
  * @param target Either an HTML element or a CSS selector.
  * @param options
@@ -289,7 +80,7 @@ export function stopAll() {
 * certain type.
 *
 * @param elem An HTML element
-* @param type an HTML tag type (uppercased)
+* @param type an HTML tag type (uppercase)
 *
 * @return An HTML element
 */
@@ -386,7 +177,7 @@ function bindElement(element, options) {
             // Set a loading timeout if one is specified
             if (typeof options.timeout === 'number') {
                 clearTimeout(timeout);
-                timeout = setTimeout(instance.stop, options.timeout);
+                timeout = setTimeout(function () { instance.stop(); }, options.timeout);
             }
 
             // Invoke callbacks
@@ -397,3 +188,202 @@ function bindElement(element, options) {
 
     }, false);
 }
+
+/**
+ * LaddaButton class constructor
+ * @param {HTMLElement} button
+ */
+function LaddaButton(button) {
+    this._button = button;
+    // The text contents must be wrapped in a ladda-label
+    // element, create one if it doesn't already exist
+    this._laddaLabel = this._button.querySelector('.ladda-label');
+
+    if (!this._laddaLabel) {
+        this._laddaLabel = document.createElement('span');
+        this._laddaLabel.className = 'ladda-label';
+        wrapContent(this._button, this._laddaLabel);
+    }
+
+    this._statusEl = document.createElement('span');
+    this._statusEl.className = 'ladda-label';
+    this._spinnerWrapper = this._button.querySelector('.ladda-spinner');
+
+    // Wrapper element for the spinner
+    if (!this._spinnerWrapper) {
+        this._spinnerWrapper = document.createElement('span');
+        this._spinnerWrapper.className = 'ladda-spinner';
+    }
+
+    this._button.appendChild(this._spinnerWrapper);
+
+    this._timer = null; // Timer used to delay starting/stopping the spinner
+    this._statusTimer = null; // Timer used to delay removing a success/failure status
+    this._spinner = null;
+    this._removing = false;
+}
+
+/**
+ * Enter the loading state.
+ */
+LaddaButton.prototype.start = function () {
+    // Create the spinner if it doesn't already exist
+    if (!this._spinner) {
+        this._spinner = createSpinner(this._button);
+    }
+
+    this._clearStatus();
+    clearTimeout(this._timer);
+    clearTimeout(this._statusTimer);
+
+    this._button.disabled = true;
+    this._button.setAttribute('data-loading', '');
+    this._spinner.spin(this._spinnerWrapper);
+
+    this.setProgress(0);
+
+    return this; // chain
+};
+
+/**
+ * Enter the loading state after a delay.
+ * @param {number} delay
+ */
+LaddaButton.prototype.startAfter = function (delay) {
+    clearTimeout(this._timer);
+    this._timer = setTimeout(function () { this.start(); }.bind(this), delay);
+
+    return this; // chain
+};
+
+LaddaButton.prototype._clearStatus = function () {
+    if (this._button.hasAttribute('data-success') || this._button.hasAttribute('data-failed')) {
+        this._button.disabled = false;
+        this._button.removeAttribute('data-success');
+        this._button.removeAttribute('data-failed');
+        this._button.removeChild(this._statusEl);
+        this._laddaLabel.style.display = 'block';
+    }
+};
+
+/**
+ * Exit the loading, success, or failure state.
+ */
+LaddaButton.prototype.stop = function () {
+    if (this.isLoading()) {
+        this._button.disabled = false;
+        this._button.removeAttribute('data-loading');
+    } else {
+        this._clearStatus();
+    }
+
+    clearTimeout(this._timer);
+    clearTimeout(this._statusTimer);
+
+    if (this._spinner) {
+        if (this._removing) {
+            this._spinner.stop();
+            this._spinner = null;
+        } else {
+            // Kill the animation after a delay to make sure it
+            // runs for the duration of the button transition
+            this._timer = setTimeout(function () { this._spinner.stop(); }.bind(this), 375);
+        }
+    }
+
+    return this; // chain
+};
+
+/**
+ * Toggle the loading state on/off.
+ */
+LaddaButton.prototype.toggle = function () {
+    return this.isLoading() ? this.stop() : this.start();
+};
+
+/**
+ * Sets the width of the visual progress bar inside of this Ladda button
+ *
+ * @param {number} progress in the range of 0-1
+ */
+LaddaButton.prototype.setProgress = function (progress) {
+    // Cap it
+    progress = Math.max(Math.min(progress, 1), 0);
+
+    var progressElement = this._button.querySelector('.ladda-progress');
+
+    // Remove the progress bar if we're at 0 progress
+    if (progress === 0 && progressElement && progressElement.parentNode) {
+        progressElement.parentNode.removeChild(progressElement);
+    } else {
+        if (!progressElement) {
+            progressElement = document.createElement('div');
+            progressElement.className = 'ladda-progress';
+            this._button.appendChild(progressElement);
+        }
+
+        progressElement.style.width = ((progress || 0) * this._button.offsetWidth) + 'px';
+    }
+};
+
+LaddaButton.prototype.isLoading = function () {
+    return this._button.hasAttribute('data-loading');
+};
+
+LaddaButton.prototype.remove = function () {
+    this._removing = true;
+    this.stop();
+    ALL_INSTANCES.splice(ALL_INSTANCES.indexOf(this), 1);
+};
+
+/**
+ * Stops any progress and changes the button color to green with a check mark.
+ *
+ * @param {number} timeout The time in milliseconds before the button returns to its default state.
+ * If timeout is 0 the button will remain in a success state until the stop() method is called.
+ */
+LaddaButton.prototype.succeed = function (timeout) {
+    if (timeout === undefined) {
+        timeout = 1250;
+    }
+
+    this.stop();
+    this._button.disabled = true;
+    this._button.setAttribute('data-success', '');
+
+    this._statusEl.textContent = '✔';
+    this._button.appendChild(this._statusEl);
+    this._laddaLabel.style.display = 'none';
+
+    if (timeout !== 0) {
+        this._statusTimer = setTimeout(function () { this.stop(); }.bind(this), timeout);
+    }
+
+    return this; // chain
+};
+
+/**
+ * Stops any progress and changes the button color to red with a failure icon.
+ *
+ * @param {number} timeout The time in milliseconds before the button returns to its default state.
+ * If timeout is 0 the button will remain in a failure state until the stop() method is called.
+ */
+LaddaButton.prototype.fail = function (timeout) {
+    if (timeout === undefined) {
+        timeout = 1250;
+    }
+
+    this.stop();
+    this._button.disabled = true;
+    this._button.setAttribute('data-failed', '');
+
+    this._statusEl.textContent = '✘';
+    this._button.appendChild(this._statusEl);
+    this._laddaLabel.style.display = 'none';
+
+    if (timeout !== 0) {
+        this._statusTimer = setTimeout(function () { this.stop(); }.bind(this), timeout);
+    }
+
+    return this; // chain
+};
diff --git a/site/index.js b/site/index.js
index b6c13c78..db0de75b 100644
--- a/site/index.js
+++ b/site/index.js
@@ -14,8 +14,8 @@ Ladda.bind('.progress-demo button', {
             if (progress === 1) {
                 // instance.stop();
 
-                Math.random() > 0.5 ? instance.loadingSuccessful(false, 2000) : instance.loadingFailed(false);
-                
+                (Math.random() > 0.5) ? instance.succeed() : instance.fail();
+
                 clearInterval(interval);
             }
         }, 200);
@@ -28,8 +28,8 @@ Ladda.bind('.progress-demo button', {
 // var l = Ladda.create( document.querySelector( 'button' ) );
 // l.start();
 // l.stop();
-// l.loadingSuccessful( boolean, number);
-// l.loadingFailed( boolean, number);
+// l.succeed(number);
+// l.fail(number);
 // l.toggle();
 // l.isLoading();
 // l.setProgress( 0-1 );

From c41f3c32f0a77daab8f742c17d2c3cac4dd9be3c Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Thu, 24 Dec 2020 23:27:39 -0600
Subject: [PATCH 4/5] Cleanup

---
 css/ladda.scss | 9 +++------
 js/ladda.js    | 3 +--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/css/ladda.scss b/css/ladda.scss
index b5d44a2b..8aae5455 100644
--- a/css/ladda.scss
+++ b/css/ladda.scss
@@ -441,10 +441,12 @@ $spinnerSize: 32px !default;
         margin-left: 0;
     }
 
-    &[data-loading] {
+    &[data-loading], &[data-success], &[data-failed] {
         border-radius: 50%;
         width: 52px;
+    }
 
+    &[data-loading] {
         .ladda-label {
             opacity: 0;
         }
@@ -453,11 +455,6 @@ $spinnerSize: 32px !default;
             opacity: 1;
         }
     }
-
-    &[data-success], &[data-failed] {
-        border-radius: 50%;
-        width: 52px;
-    }
 }
 
 
diff --git a/js/ladda.js b/js/ladda.js
index c770dff2..8269c2b0 100644
--- a/js/ladda.js
+++ b/js/ladda.js
@@ -76,8 +76,7 @@ export function stopAll() {
 }
 
 /**
-* Get the first ancestor node from an element, having a
-* certain type.
+* Get the first ancestor node with a given tag name from an element.
 *
 * @param elem An HTML element
 * @param type an HTML tag type (uppercase)

From d6681a86747984265f4e892bde4509aa97844fe2 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Fri, 1 Jan 2021 11:51:24 -0600
Subject: [PATCH 5/5] Fix success/failure state with Bootstrap

---
 css/ladda.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/css/ladda.scss b/css/ladda.scss
index 8aae5455..ce18dd52 100644
--- a/css/ladda.scss
+++ b/css/ladda.scss
@@ -87,11 +87,13 @@ $spinnerSize: 32px !default;
 }
 
 .ladda-button[data-failed] {
-    background: #e63946;
+    background: #dc3545;
+    border-color: #dc3545; /* necessary when using Bootstrap */
 }
 
 .ladda-button[data-success] {
-    background:#008000;
+    background:#198754;
+    border-color: #198754; /* necessary when using Bootstrap */
 }
 
 /*************************************