Bulma Pageloader

A beautiful overlay loader for your Bulma projects.

The Pageloader extension provides a full-page overlay with smooth animations. Perfect for page transitions or long-running operations.

Interactive Examples

Click the buttons below to trigger different pageloader variations and animations.

How to use

Add the .pageloader div at the beginning of your <body>. Control visibility by toggling the .is-active class.

<div class="pageloader is-active">
    <span class="title">Loading...</span>
</div>

Animations

Change the slide direction using modifier classes:

is-left-to-right
is-right-to-left
is-bottom-to-top
(Default: Top to Bottom)

Simple Trigger Scripts

Use a small snippet of JavaScript to show and hide the loader after a delay.

function triggerLoader(id) {
    const loader = document.getElementById(id);
    loader.classList.add('is-active');
    setTimeout(() => {
        loader.classList.remove('is-active');
    }, 2000);
}