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

이 주제에 관심 있는 분들에게 흥미로울 수 있습니다: