CSS для создания мигающего серого поля скелета «Загрузка» (FOUC, Flash of Unstyled Content)
Чтобы указать, что загружаются разные части экрана, мы хотим реализовать мигающий серый прямоугольник типа FOUC. Удивительно, но все ресурсы в сети посвящены тому, как удалить или избавиться от контента FOUC, а не тому, как его имитировать. Как мне создать «мигающую серую обложку» типа FOUC для любого конкретного <div> в CSS?
Требования таковы: (1) этот CSS должен скрывать любое внутреннее содержимое, (2) он должен анимировать 2-3 серых цвета, включая #F5F5F5.
У меня есть отправная точка в этом фрагменте, но он не закрывает никакого контента или анимации. Куда мне идти дальше?
.infoColumns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 650px;
margin-top: 30px;
margin-bottom: 16px;
}
.flashLoading {
/* Should obscure all content and flash similar gray colors */
background-color: #F5F5F5
}<div class = "infoColumns">
<p>Item 1:</p>
<p class = "flashLoading">Value for Item 1</p>
</div>Хороший призыв. Но поскольку этот код недоступен (я проверил ссылку), и мы не используем пользовательский интерфейс Material, все равно было бы неплохо предоставить полный ответ в этой теме на благо всех, кто ищет.
цвет: прозрачный в дополнение к фону?
Запросы на сторонние ресурсы здесь не по теме. Пожалуйста, посетите справочный центр.
Это реальный вопрос, а не сторонний запрос, поэтому давайте сосредоточимся на рассматриваемом техническом вопросе. Для ясности я перефразировал.
@geneb. Я считаю, что вы можете просто проверить их код с помощью инструментов разработчика для CSS.
Ответы 1
Я нашел решение: (1) определить основной стиль skeleton, как показано ниже, с прозрачным текстом, а затем (2) keyframes чтобы он чередовался от 0 до 100%:
.skeleton {
animation: skeleton-loading 1s linear infinite alternate;
color: transparent;
}
@keyframes skeleton-loading {
0% {
background-color: #F5F5F5; /* FROM Color 1 */
}
100% {
background-color: #E2E2E2; /* TO Color 2 */
}
}
.infoColumns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 650px;
margin-top: 30px;
margin-bottom: 16px;
}
.skeleton {
animation: skeleton-loading 1s linear infinite alternate;
color: transparent;
}
@keyframes skeleton-loading {
0% {
background-color: #F5F5F5; /* FROM Color 1 */
}
100% {
background-color: #E2E2E2; /* TO Color 2 */
}
}<div class = "infoColumns">
<p>Item 1:</p>
<p class = "skeleton">Value for Item 1</p>
</div>
Я считаю, что то, о чем вы говорите, в терминах пользовательского интерфейса называется скелетом. Вы можете украсть CSS из Material UI mui.com/material-ui/react-skeleton