スピナーをロゴに置き換える

サポート
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

このトピックを訪れる人々が興味を持つかもしれません：