Replace Spinner with a logo

Поддержка
1

How can I replace a generic spinner with a logo?
Here is the CSS code

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

I would like to replace the generic white cube with a logo. Any suggestions?
Thanks

2

Avoid repositioning; you simply need to overwrite the current icon, so add the background-image and the background-size.

.spinner {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    background-image: url("URL-of-your-logo-image-here");
    background-size: 40px 40px;
}
3

Thanks! Let me play with the code and see if can make it work.

The website is lajollacreative.com still a work in progress.

4

Хотел просто добавить наш собственный «спиннер». Но так как мы — сообщество 3D-графики, мы решили поднять это на новую высоту :slight_smile: Посмотрите на https://blenderartists.org/

5

Вот ещё один:

6

Моя иконка загрузки — это gif, но мне было бы интересно узнать, создал ли кто-нибудь компонент темы для кастомизации HTML-кода загрузки.

7

Для небольшого развлечения мы решили вызвать наше сообщество на создание новых спиннеров; мы будем менять анимацию примерно раз в месяц.

Первый выбранный нами спиннер представляет процесс рендеринга в Blender:

Редакция: ой, мета-система конвертирует загруженные GIF в JPG :-/ Нажмите здесь, чтобы увидеть оригинал (или посетите наш сайт, чтобы увидеть его в действии).

8

Это может заинтересовать тех, кто заходит в эту тему: