Logo

Base Examples

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


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

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


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

Use .spinner-leftand .spinner-rightclases 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 .btnto add spinner effect to buttons and set the alignment with .spinner-rightand .spinner-leftclasses.


                        <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-controlto add spinner effect to form inputs and set the spinner alignment with .spinner-rightand .spinner-leftclasses.


                        <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>
                        

Select A Demo

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