Чтобы получить загрузчик CSS с эффектом размытия фона, вы можете использовать несколько методов. Вот несколько приемов:

1. Свойство CSS-фильтра:
   Вы можете использовать свойство filterсо значением blur(), чтобы применить эффект размытия к фону загрузчика. Объедините это с другими свойствами CSS, такими как positionи z-index, чтобы создать желаемый эффект.

«»;
позиция: фиксированная;
сверху: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: url( loader-background.jpg) center center no-repeat;
background-size: Cover;
фильтр: размытие(5px);

2. Свойство CSS Backdrop-filter:
   Свойство backdrop-filterможно использовать для применения эффекта размытия к области позади элемента, создавая размытие фона. Однако учтите, что это свойство не поддерживается в старых браузерах.

.loader {
  backdrop-filter: blur(5px);
}

3. Псевдоэлементы CSS:
   Вы можете использовать псевдоэлементы, такие как ::beforeили ::after, чтобы создать наложение, охватывающее весь экран, и применить его. эффект размытия.

«»;
позиция: фиксированная;
сверху: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: url( loader-background.jpg) center center no-repeat;
background-size: Cover;
фильтр: размытие(5px);
z-index: 9999;

Не забудьте заменить loader-background.jpgпутем к желаемому фоновому изображению.