---
title: "Bloop Preloader — Free Framer component · Best of Framer"
description: "Free Framer component · by Bryan Hermoza · Loaders. Custom preloader for smooth loads"
canonical: "https://framer.elliotli.dev/component/bloop-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Bloop Preloader

# Bloop Preloader

Custom preloader for smooth loads

[View on Framer](https://framer.com/marketplace/components/bloop-preloader/?via=elliot-li)

![Bloop Preloader preview image 1](https://framer.elliotli.dev/og/component/bloop-preloader/01ac290c4a4ddaab/1600x1200.jpg)

## Summary

Custom preloader for smooth loads

## Description

This component is a fully responsive preloader, designed to cover the browser window (100% width and 100vh height) and ensure a smooth transition during your page’s loading process.

You can easily customize the following elements:

-   Background color
    
-   Texts and text colors
    
-   Preloader content (by editing the elements inside the “Change Content” stack)
    

If you want to change the animated figure, you can replace it inside the “Figure” stack with your own design. Just make sure its background color matches the page’s background and that you keep the component’s base configuration to preserve proper behavior.

The figure (path) color is automatically linked to the “Background Color - Web&Component” style, ensuring that the preloader maintains the visual harmony of your site without manual adjustments — simply modify that color style from the style panel, and the update will apply globally.

To ensure a smooth user experience, set the component’s variant to pointer: none, preventing the preloader from interfering with user interactions while it’s active.

It lasts approximately 2.5 seconds, so it’s recommended to align the appearance of your main page elements with this duration for a synchronized and professional transition.

Tip: Keep the base structure of the component and make changes only to the recommended areas to avoid display or behavior issues.

No returns. If you have any problems, please contact me at [neo.framer@gmail.com](mailto:neo.framer@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #1857

## Details

- **Author**: Bryan Hermoza
- **Published**: 2025-10-28
- **Updated**: 2026-06-22
- **Added**: 2025-10-08
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story