webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Как сделать прелоадер сайта из логотипа?

Привет всем!
Как реализовать прелоадер сайта из логотипа? Есть какие-то примеры?
Изначально логотип будет белый, и будет заполняться цветом.
Естественно, цветом должен заполняться из расчета загрузки сайта.
73fff39ee5964cc891c6c1624f296e93.gif
  • Вопрос задан
  • 2985 просмотров
Пригласить эксперта
Ответы на вопрос 3
@p1rat495
.logo{
    width: 100px;
    height: 20px;
    position: relative;
    background-size: cover;
    background-image: url(logo.png);
}
.logo__loaded{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0%;
    background-size: cover;
    background-image: url(logo2.png);
}


<div class="logo">
  <div class="logo__loaded" style="70%"></div>
</div
Ответ написан
Недавно решал точно такую же задачу.
Сделал загрузку логотипа в зависимости от веса файлов страницы, т.е. пока все картинки не загрузились - логотип заливается цветом. Упор сделал именно на картинки, т.к. текстовые файлы не сильно влияют на загрузку.

Суть в том, что нужно использовать svg (для масок) и как писали выше - javascript код для определения загрузились картинки или нет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы