Loaders


Basic CSS Loader

Example

<div class="loader-sm"></div>
<div class="loader-md"></div>
<div class="loader-lg"></div>

JS Loader

Here you can use $(<element>).loading() to enable loader in specified element and $(<element>).resetLoading() to remove loader from specified element.

For more details about JS Loaders JS Loader
Example

Click below fields to display loader.

<!-- HTML Content -->
<button id="submit-btn" class="btn btn-primary w-150" type="button">Click Here</button>
<a href="#" id="small-div">
    <div class="small-rectangle">
        <span class="h4" id="text-element">Click Here</span>
    </div>
</a>

<!-- jQuery event functions -->
<script type="text/javascript">
        $('#submit-btn').click(function (event) {
            $('#submit-btn').loading();
            setTimeout(function () {
                $('#submit-btn').resetLoading();
            }, 1500);
        });
        $('#small-div').click(function (event) {
            $('#small-div').find('#text-element').loading();
            setTimeout(function () {
                $('#small-div').find('#text-element').resetLoading();
            }, 1500);
        });
</script>