A really simple HTML and CSS which involves some tricky JavaScript archive the blur effect. Because, besides the blur effect, the project consists in showing an increasing percentage of how much the blur effect decreases so we can see the image more clearly.

the class .bg and .loading-text make the visual display of the information we can see: the image and the number:

.bg {
    background: url('https://images.unsplash.com/photo-1664730302624-3cba2a181006?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80') no-repeat center center/cover;
    position: absolute;
    top: -30px;
    left: -30px;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
    z-index: -1;
    filter: blur(0px);
}

.loading-text {
    font-size: 50px;
    color: black;
}

Although the code the filter property is set to 0 at the beginning the image is completely blurred. This is possible because in this project we use the setInterval() and the clearInterval() methods. As the Documentation says:

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

Mozilla Documentation

When the page loads for the first time the function blurring is called by the setIntervalMethod. The load starts at 0 and starts adding one. This increment changes the blur and the opacity. So, we’ll begin to see the image more clearly. when the load becomes 100. The interval will be cleared. The complete functoriality is here:

let load = 0

let int = setInterval(blurring, 30)

function blurring() {
    load++

    if(load > 99) {
        clearInterval(int)
    }

    loadText.innerText = `${load}%`
    loadText.style.opacity = scale(load, 0, 100, 1, 0);
    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

You can see the code in this GitHub Repository: 05.blurry_loading and the demo of the project is here: Burry Loading