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-success spinner spinner-white spinner-left">
                            Success
                        </button>
                        <button type="button" class="btn btn-danger spinner spinner-white spinner-left">
                            Danger
                        </button>
                        

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

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>
                        

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
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

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