Logo

Base Examples

Add .spinner class to any element to have a pseudo spinner.


                        <div class="spinner"></div>
                        

Add .spinner-track class to to have spinner with track bar.


                        <div class="spinner"></div>
                        

Use .spinner-left and .spinner-right clases to set spinner aligment.


                        <div class="spinner spinner-right"></div>
                        <div class="spinner spinner-left"></div>
                        

Add .spinner-{color} class to have spinner color options.


                        <div class="spinner spinner-primary mr-15"></div>
                        <div class="spinner spinner-success mr-15"></div>
                        <div class="spinner spinner-danger mr-15"></div>
                        <div class="spinner spinner-warning mr-15"></div>
                        <div class="spinner spinner-info mr-15"></div>
                        <div class="spinner spinner-dark mr-15"></div>

                        <div class="spinner spinner-track spinner-primary mr-15"></div>
                        <div class="spinner spinner-track spinner-success mr-15"></div>
                        <div class="spinner spinner-track spinner-danger mr-15"></div>
                        <div class="spinner spinner-track spinner-warning mr-15"></div>
                        <div class="spinner spinner-track spinner-info mr-15"></div>
                        <div class="spinner spinner-track spinner-dark mr-15"></div>
                        

Add .spinner-{sm|lg} classes for spinner size options.


                        <div class="spinner spinner-primary spinner-sm mr-15"></div>
                        <div class="spinner spinner-primary mr-15"></div>
                        <div class="spinner spinner-primary spinner-lg mr-15"></div>

                        <div class="spinner spinner-track spinner-primary spinner-sm mr-15"></div>
                        <div class="spinner spinner-track spinner-primary mr-15"></div>
                        <div class="spinner spinner-track spinner-primary spinner-lg mr-15"></div>
                        

Spinners On Buttons

Use with .btn to add spinner effect to buttons and set the alignment with .spinner-right and .spinner-left classes.


                        <button type="button" class="btn btn-primary spinner spinner-white spinner-right">
                            Primary
                        </button>
                        <button type="button" class="btn btn-secondary spinner spinner-dark spinner-right">
                            Secondary
                        </button>
                        <button type="button" class="btn btn-light-success spinner spinner-darker-success spinner-left mr-3">
                            Success
                        </button>
                        <button type="button" class="btn btn-outline-danger spinner spinner-darker-danger spinner-left mr-3">
                            Danger
                        </button>
                        

Use KTUtil.btnWait() and KTUtil.btnRelease() utility functions to control button loading state with Javscript. Click to see how the above functions work on the below buttons:


                                <button type="button" class="btn btn-primary mr-3" id="kt_btn_1">
                                    Primary
                                </button>
                                <button type="button" class="btn btn-secondary mr-3" id="kt_btn_2">
                                    Secondary
                                </button>
                                <button type="button" class="btn btn-light-success spinner-left mr-3" id="kt_btn_3">
                                    Success
                                </button>
                                <button type="button" class="btn btn-outline-danger  spinner-left mr-3" id="kt_btn_4">
                                    Danger
                                </button>
                                

                                    // Demo 1
                                    var btn = KTUtil.getById("kt_btn_1");

                                    KTUtil.addEvent(btn, "click", function() {
                                        KTUtil.btnWait(btn, "spinner spinner-right spinner-white pr-15", "Please wait");

                                        setTimeout(function() {
                                            KTUtil.btnRelease(btn);
                                        }, 1000);
                                    });

                                    // Demo 2
                                    var btn = KTUtil.getById("kt_btn_2");

                                    KTUtil.addEvent(btn, "click", function() {
                                        KTUtil.btnWait(btn, "spinner spinner-dark spinner-right pr-15", "Loading");

                                        setTimeout(function() {
                                            KTUtil.btnRelease(btn);
                                        }, 1000);
                                    });

                                    // Demo 3
                                    var btn = KTUtil.getById("kt_btn_3");

                                    KTUtil.addEvent(btn, "click", function() {
                                        KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-success pl-15", "Disabled...");

                                        setTimeout(function() {
                                            KTUtil.btnRelease(btn);
                                        }, 1000);
                                    });

                                    // Demo 4
                                    var btn = KTUtil.getById("kt_btn_4");

                                    KTUtil.addEvent(btn, "click", function() {
                                        KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-danger pl-15", "Please wait");

                                        setTimeout(function() {
                                            KTUtil.btnRelease(btn);
                                        }, 1000);
                                    });
                                

Spinners On Inputs

Use with .form-control to add spinner effect to form inputs and set the spinner alignment with .spinner-right and .spinner-left classes.


                        <div class="spinner spinner-primary spinner-left">
                            <input class="form-control mb-5"/>
                        </div>

                        <div class="spinner spinner-success spinner-right">
                            <input class="form-control"/>
                        </div>
                        

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo


Deprecated: Return type of Adbar\Dot::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 390

Deprecated: Return type of Adbar\Dot::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 401

Deprecated: Return type of Adbar\Dot::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 412

Deprecated: Return type of Adbar\Dot::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 428

Deprecated: Return type of Adbar\Dot::count($key = null) should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 445

Deprecated: Return type of Adbar\Dot::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 461

Deprecated: Return type of Adbar\Dot::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 477
Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30