استبدال شارة التحميل بشعار

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

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;
}

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

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

أردت فقط أن أضيف هنا ‘مؤشر التحميل’ المخصص لدينا. ولكن بما أننا مجتمع رسومات ثلاثية الأبعاد، فقد اضطررنا إلى رفعه إلى بُعد آخر :slight_smile: تحقق منه على https://blenderartists.org/

إليك آخر:

أيقونة التحميل الخاصة بي هي ملف GIF، لكنني مهتم بمعرفة ما إذا كان شخص ما قد أنشئ مكون سمة لتخصيص كود HTML الخاص بالتحميل.

لإضفاء بعض المرح الإضافي، قررنا تحدي مجتمعنا لتصميم أشرطة تدوير جديدة، وسنقوم بتغيير التحريك مرة واحدة شهريًا تقريبًا.

الأول الذي اخترناه يمثل عملية التصيير في Blender:

تعديل: أوبس، يحول الميتا ملفات GIF المرفوعة إلى JPG :-/ انقر هنا لعرض الملف الأصلي (أو قم بزيارة موقعنا لمشاهدته يعمل).

قد يثير ذلك اهتمام الأشخاص الذين يزورون هذا الموضوع: