docs: update content

Author: mrholek

docs/assets/js/snippets.js

@@ -517,4 +517,23 @@
     })
   }
   // js-docs-end rating-custom-feedback
+
+  // -------------------------------
+  // Time Pickers
+  // -------------------------------
+  // 'Time Pickers components' example in docs only
+
+  // js-docs-start time-picker-custom
+  const myTimePickerCustom = document.getElementById('myTimePickerCustom')
+  if (myTimePickerCustom) {
+    const options = {
+      locale: 'en-US',
+      hours: [1, 3, 5, 7],
+      minutes: [0, 15, 30, 45],
+      seconds: s => s < 20
+    }
+
+    new coreui.TimePicker(document.getElementById('myTimePickerCustom'), options)
+  }
+  // js-docs-end time-picker-custom
 })()

docs/content/components/loading-buttons.md

@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Loading Buttons
-description: Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.
+description: Bootstrap loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
 aliases:
   - "/4.0/components/loading-buttons/"
 toc: true
@@ -12,35 +12,64 @@ other_frameworks: loading-button
 
 ## Basic example
 
+Create basic Bootstrap Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.
+
 {{< example >}}
-<button type="button" class="btn btn-primary btn-loading" data-coreui-timeout="2000" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-outline-primary btn-loading" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-ghost-primary btn-loading" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-primary" data-coreui-timeout="2000" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-outline-primary" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-ghost-primary" data-coreui-toggle="loading-button">Submit</button>
 {{< /example >}}
 
 ## Spinners
 
 ### Border
 
+The default option. Use loading buttons with a border spinner to indicate loading status.
+
 {{< example >}}
-<button type="button" class="btn btn-info btn-loading" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-outline-success btn-loading" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-ghost-warning btn-loading" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-info" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-outline-success" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-ghost-warning" data-coreui-toggle="loading-button">Submit</button>
 {{< /example >}}
 
 ### Grow
 
+Switch to a grow spinner for Bootstrap loading buttons by adding `data-coreui-spinner-type="grow"`.
+
 {{< example >}}
-<button type="button" class="btn btn-info btn-loading" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-outline-success btn-loading" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
-<button type="button" class="btn btn-ghost-warning btn-loading" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-info" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-outline-success" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
+<button type="button" class="btn btn-ghost-warning" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
 {{< /example >}}
 
 
 ## Usage
 
 {{< bootstrap-compatibility >}}
 
+### Via data attributes
+
+Add `data-coreui-toggle="loading-button"` to a `button` element.
+
+```html
+<button type="button" class="btn btn-primary" data-coreui-toggle="loading-button">Submit</button>
+```
+
+### Via JavaScript
+
+Call the loading button via JavaScript:
+
+```html
+<div class="btn btn-primary btn-loading"></div>
+```
+
+```js
+const loadingButtonElementList = Array.prototype.slice.call(document.querySelectorAll('.btn-loading'))
+const loadingButtonList = loadingButtonElementList.map(loadingButtonEl => {
+  return new coreui.DatePicker(loadingButtonEl)
+})
+```
+
 ### Options
 
 {{< markdown >}}
@@ -50,10 +79,9 @@ other_frameworks: loading-button
 {{< bs-table >}}
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `disabledOnLoading`| boolean| `false`| |
-| `spinner`| boolean| `true`| |
-| `spinnerType`| string| `'border'`| |
-| `timeout`| boolean \| number| `false`| |
+| `disabledOnLoading`| boolean | `false`| Makes button disabled when loading. |
+| `spinnerType`| 'border', 'grow' | `'border'`| Sets type of spinner. |
+| `timeout`| boolean, number | `false`| Automatically starts loading animation and stops after a determined amount of milliseconds. |
 {{< /bs-table >}}
 
 ### Methods