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

Question

[Сергей Горячев]

Привет всем!
Как реализовать прелоадер сайта из логотипа? Есть какие-то примеры?
Изначально логотип будет белый, и будет заполняться цветом.
Естественно, цветом должен заполняться из расчета загрузки сайта.

Answer 1

[Ден Тоцкий]

как вариант перекрытие одного лого другим
https://jsfiddle.net/c5o5qm7o/

Answer 2

[Влад]

.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

Comments

[Сергей Горячев]

Честно говоря, не совсем уловил, как это будет реагировать на загрузку сайта...

[Дмитрий]

Sergey Goryachev: так процент перекрытия реализуется на javascript, исходя из количества ресурсов - картинок и прочего

Answer 3

[Думай Головой]

Недавно решал точно такую же задачу.
Сделал загрузку логотипа в зависимости от веса файлов страницы, т.е. пока все картинки не загрузились - логотип заливается цветом. Упор сделал именно на картинки, т.к. текстовые файлы не сильно влияют на загрузку.

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

Comments

[Сергей Горячев]

А примерчика нет?