Why does my css loading code fail to appear in the middle and be hidden?

Question

Specific code is at the following link: https://sololearn.com/compiler-playground/WaewbOxFk180/?ref=app

Answer 1

you are supposed to let your loader run immediately, then hide it after the page loads. Not run it after it loads.

onload = () => {
document.querySelector('.line').style.display = 'none';
}

so delete the parts in the .line class that hides the loader. It should be visible by default.

your loader is not centered because you used position:relative; on your line class. Use absolute instead.

Answer 2

here is your code I modified:

https://sololearn.com/compiler-playground/W59TlCOptrYQ/?ref=app