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>

Need Help?

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