Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.
Keen's custom .spinnerpseudo element enables spinning effect for any component.

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>
                        

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

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

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

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

DB Migration

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

System Messages
09:30 AM

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

2:45 PM

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

3:12 PM

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

7:05 PM

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

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

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.

Select A Demo

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