0

Скажите пожалуйста, я сейчас хочу вставить прелодер в своём проекте, но не на всю страницу, а на отдельные элементы. Должно срабатывать как на картинке. прелодер для элемента

Здесь худо бедно работает. Дальше у меня на странице три блока один под другим. Пример.

<div>
<Элемент-№1></Элемент-№1>
<Элемент-№2></Элемент-№2>
<Элемент-№3></Элемент-№3>
</div>

Когда я открываю редактор блок ниже смещается вниз Открытый редактор

Но когда я добавляю прелодер, он размещается ниже области, которую требуется скрыть. Что бы от этого избавиться, можно поставить position: absolut на родительский блок, но у меня блоки стоящие ниже перестают менять своё положение.

Пример opacity прелодера 0.5 что бы видно было. Наложение блоков один на другой

Как мне можно решить эту проблему ?

2
  • Позиционировать нужно относительно сами блоки а прелоадер абсолютно родителя. 4 мар 2019 в 16:36
  • Спасибо большое (и ответу ниже. Как ответ на ответ написать ?...). Я уже грешным делом в js лезть хотел.
    – Sergey
    5 мар 2019 в 1:29

1 ответ 1

1

Вот так как вариант

.grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px
}

figure {
  margin: 0;
  padding: 0;
}

figcaption {
  text-align: center
}

img {
  width: 100%
}

.img__wrapper {
  position: relative;
}

.preloader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2x solid transparent;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  border-radius: 50%;
  animation: rotate 1s ease-in-out infinite;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="grid">
  <figure>
    <p class="img__wrapper">
      <img src="https://picsum.photos/200/200/?blur" alt="" />
      <span class="preloader"></span>
    </p>
    <figcaption>текст</figcaption>
  </figure>
  <figure>
    <p class="img__wrapper">
      <img src="https://picsum.photos/200/200/?blur" alt="" />
      <span class="preloader"></span>
    </p>
    <figcaption>текст</figcaption>
  </figure>
  <figure>
    <p class="img__wrapper">
      <img src="https://picsum.photos/200/200/?blur" alt="" />
      <span class="preloader"></span>
    </p>
    <figcaption>текст</figcaption>
  </figure>
</div>

3
  • Спасибо большое. Мне подсказали ещё один вариант. ru.stackoverflow.com/questions/489980/… Единственное хотелось бы добавить. Я когда либо grid либо flex поставил, заметил, что при открытии консоли, размер прелодера тоже начал изменяться(принтскрин не могу прицепить к сожалению), а на мобильных приложениях это может проявиться. Добавил свойство position: sticky и проблема исчезла.
    – Sergey
    5 мар 2019 в 1:32
  • Это был пример, никак не полноценное решение. Все решения нужно адаптировать под себя. 5 мар 2019 в 15:46
  • Ну да. И очень крутой пример. Sticky это как раз адаптация. У меня родительский элемент <slot> для него понадобилось. У меня структура <shadow-root> <p><slot name="any"></p> </shadow-root> <custom-component name ='any'> content </custom-component> И стили я применял к слоту. А подключается к нему три разных варианта редактора(слайдер, текст, текст-слайдер)
    – Sergey
    5 мар 2019 в 16:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.