How do I change the loading screen/preloader?

How do I change the loading screen? I think it’s the preloader, not sure if that’s what it’s called or not. I’m talking about the rectangles that show up on the site before you see actual content.

if you want to know what I’m talking about. It shows this loading screen for only a moment before you get to the site. How can I change the way the loading screen looks?

I’d also like to know if this could be changed, can you change the shapes for small images?

you change the preloader animation using css code. Here is the css code to put your image to the preloader:

.preloader .spinner{
  background-image: url(YOUR IMAGE PATH);
  width: 50px;
  height: 30px;
  top: 50%;
  left: 50%;

You can adjust the value of those css attribute in above.
And here is the css code to hide the existing preloader animation:
.preloader .spinner div{ display: none; }

you can save the code in above using custom css plugin