LoadPlus is out 
. Stop picking loaders, start composing them.
The itch: Blocs ships nine preloaders and they are all the same object. A
spinner, centred, on a flat colour, on a timer. Often users keep skipping the preloader
option entirely on client/personal work because none of them looked like they belonged to
the site they were on.
So rather than build a tenth spinner, I built something that composes 
.
Four layers
LoadPlus is a stage, a mark, a meter and an exit, chosen
independently. Three stages, three marks, three meters and ten exits works out at
over 800 compositions before you touch colour, typography, placement or timing.
There is a preset dropdown if you just want something quickly, but the point is
that what you end up with is yours.
The bit I actually care about
Your logo or wordmark fills from the bottom up as the page loads. The mark and
the progress meter become the same object instead of two things sharing a screen.
Three fill styles: a hard edge, a soft feathered one, and a wave that damps flat
at both ends so it starts and finishes level rather than getting chopped mid
cycle.
That is the one thing here that could not have come from any other loader,
because it is built out of your logo rather than mine.
Progress is real
The meter watches the page’s own assets arrive rather than running a stopwatch.
There is a hybrid mode that paces the climb so the number always moves but only
lets it finish when the page has genuinely finished, a pure real-assets mode, and
a timed mode for when you want the loader as a deliberate pause instead of a
status report.
Page transitions are included
All ten exits play in reverse to cover the screen on an internal link click, then
the next page reveals as the cover lifts. Pages arrived at that way show the
reveal only, no mark and no meter, because replaying the full intro on every
click makes a site feel slow.
It handles the back-forward cache properly, which is the thing that usually
leaves a hand rolled transition script showing a dead covered page when someone
hits back. External links, downloads, mailto, tel, anchors and new-tab links are
all left alone by a whitelist rather than a blacklist.
Things that took longer than the visible features
Some of this is worth mentioning because it is where the actual work went:
- It cannot trap a visitor. The overlay clears itself through CSS alone with no JavaScript involved, so a blocked or broken script still leaves the site reachable. Scroll locking is applied by script only, never by stylesheet, so a script failure cannot leave a page unscrollable.
- Reduced motion is automatic and not exposed as a setting, because a switch to turn it off is only ever a switch to make the site worse.
- Screen readers get one status announcement rather than a counter shouting on every frame.
- GSAP and ScrollSmoother both work. A
position: fixedelement inside a transformed ancestor silently stops being viewport relative, so the loader lifts itself out of the wrapper and keeps checking it has not been pulled back in. - Descenders. A wordmark’s line box is shorter than the font’s ascent plus descent, so the tail of a “g” hangs outside it and was being clipped out of the fill. It now measures the real ink extents and maps progress onto the letters rather than onto the box.
Get LoadPlus
One time purchase of $24.99 only.
LoadPlus is now available in the Blocs Store 
: Get LoadPlus
Want to read the full manual prior purchasing : Read the LoadPlus Manual