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
dax
(Daniela)
11 يونيو 2019، 8:18ص
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;
}
Thanks! Let me play with the code and see if can make it work.
The website is lajollacreative.com still a work in progress.
bartv
(Bart )
27 سبتمبر 2020، 12:40م
4
أردت فقط أن أضيف هنا ‘مؤشر التحميل’ المخصص لدينا. ولكن بما أننا مجتمع رسومات ثلاثية الأبعاد، فقد اضطررنا إلى رفعه إلى بُعد آخر تحقق منه على https://blenderartists.org/
Canapin
(Coin-coin le Canapin)
27 سبتمبر 2020، 12:58م
6
أيقونة التحميل الخاصة بي هي ملف GIF، لكنني مهتم بمعرفة ما إذا كان شخص ما قد أنشئ مكون سمة لتخصيص كود HTML الخاص بالتحميل.
bartv
(Bart )
25 أكتوبر 2020، 9:59ص
7
لإضفاء بعض المرح الإضافي، قررنا تحدي مجتمعنا لتصميم أشرطة تدوير جديدة ، وسنقوم بتغيير التحريك مرة واحدة شهريًا تقريبًا.
الأول الذي اخترناه يمثل عملية التصيير في Blender:
تعديل: أوبس، يحول الميتا ملفات GIF المرفوعة إلى JPG :-/ انقر هنا لعرض الملف الأصلي (أو قم بزيارة موقعنا لمشاهدته يعمل).
Canapin
(Coin-coin le Canapin)
25 أكتوبر 2020، 10:19ص
8
قد يثير ذلك اهتمام الأشخاص الذين يزورون هذا الموضوع:
Customize the loading icon
Note that it changes the main loading icon, but not the small loading icon (composer, search menu, etc).
Edit your current theme or create a new theme component.
Go in </head> and paste this code:
<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">
<div class="my-custom-loader">
</div>
</div>
{{else}}
{{yield}}
{{/if}}
</script>
Replace or fill .my-custom-l…