Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen's custom .spinner pseudo element enables spinning effect for any component.

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>
                        

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9