Loader

CSS only loading animation.

  • Falls back to Loading… on non capable browsers.
  • Add .k-hidden to the element when items are done loading.
Loading...
Loading...
Loading...
<span class="k-loader k-loader--small">Loading...</span>

<span class="k-loader k-loader--medium">Loading...</span>

<span class="k-loader k-loader--large">Loading...</span>

Loader container

Cover it’s entire parent (the parent with an absolute or relative position).

Add .k-hidden to the element when items are done loading.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Loading...
<div style="position: relative">
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    <div class="k-loader-container">
        <span class="k-loader k-loader--large">Loading...</span>
    </div>
</div>

Loader content

Add extra information to the loader above or below the loader.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.

Some extra content Loading... Some extra content
<div style="position: relative">
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    <div class="k-loader-container">
        <span class="k-loader-content">Some extra content</span>
        <span class="k-loader k-loader--large">Loading...</span>
        <span class="k-loader-content">
            <span class="k-heading">Some extra content</span>
        </span>
    </div>
</div>

Loader color

  • By default the loader inherits it’s color from it’s parent
  • An exception are loaders in the k-loader-container parent, they have the accent color by default
  • Just add the color classes found in utilities to the loader itself to color the loader
Loading...
Loading...
Loading...
<span class="k-loader k-loader--large k-color-base">Loading...</span>

<span class="k-loader k-loader--large k-color-success">Loading...</span>

<span class="k-loader k-loader--large k-color-error">Loading...</span>

Loader in button

  • Loaders in buttons are possible before or after the content or on top of the entire button
  • Loaders on top will inherit the background color of it’s parent
<button type="button" class="k-button k-button--default">
    <span class="k-loader">Loading...</span>
    <span>Loader before</span> <!-- span needed for the spacing of the loader -->
</button>

<button type="button" class="k-button k-button--primary">
    <span>Loader after</span> <!-- span needed for the spacing of the loader -->
    <span class="k-loader">Loading...</span>
</button>

<button type="button" class="k-button k-button--success">
    Loader on top
    <span class="k-loader-container">
        <span class="k-loader">Loading...</span>
    </span>
</button>

Loader in tab

  • Loaders in tabs are possible before or after the content or on top of the entire button
  • Loaders on top will inherit the background color of it’s parent
<ul class="k-tabs">
    <li>
        <a href="#tab1" data-k-toggle="tab">
            <span class="k-loader">Loading...</span>
            <span>Loader before</span> <!-- span needed for the spacing of the loader -->
        </a>
    </li>
    <li>
        <a href="#tab2" data-k-toggle="tab">
            <span>Loader after</span> <!-- span needed for the spacing of the loader -->
            <span class="k-loader">Loading...</span>
        </a>
    </li>
     <li class="k-is-active">
        <a href="#tab3" data-k-toggle="tab">
            Loader on top
            <span class="k-loader-container">
                <span class="k-loader">Loading...</span>
            </span>
        </a>
    </li>
</ul>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.