Objective I want to replace the default Botpress webchat loader with a custom logo animation. The behavior I want: - Show the logo centered in the chat window on load - A subtle zoom-in animation followed by a smooth fade out - The header and input field stay hidden while the loader is active, then fade in once it disappears The logo is either an SVG path or a URL (e.g. https://example.com/assets/img/svg-icons/logo.svg). Issue The CSS works differently depending on where I test it: - In the Botpress Studio CSS preview panel → the logo appears but is blurry and centered on screen + sometimes animation doesn't work. - On the live website where the bot is deployed → the logo is blurry and way too large, completely oversized + animation works sometimes + deffault loader is still visible. I suspect the issue is related to how the .bpLoader container is sized differently in the preview vs the actual embedded webchat widget, causing the logo and zoom animation to scale unpredictably. Additionally, my current animation is a heavy zoom-through effect (scaling up to 60x) which I now want to simplify. I just want: Logo appears at normal size Slight zoom in (subtle, not aggressive) Smooth fade out Header and composer fade in after loader disappears What I have tried View photo for my css Problems with this approach: - The fixed width: 570px and height: 347px on .bpLoader::before does not scale well inside the chat widget which has a fixed width - The aggressive scale values (10 → 60) cause the logo to render blurry because the browser is scaling a rasterized version of the SVG - Behavior is inconsistent between the Studio preview and the live embedded widget Context Platform: Botpress Webchat Logo format: SVG via URL (https://example.com/assets/img/svg-icons/logo.svg) / SVG path My questions Is it possible to create a custom loader using css styling? If yes, how can I do this? https://cdn.discordapp.com/attachments/1477733470699782235/1477733471060230276/Schermafbeelding_2026-03-01_om_19.24.23.png?ex=69a5d60a&is=69a4848a&hm=f5d6e015bab862082b7fccdb6af9bd5e66988f82bb87a673921fdf13c6117d52&

Can you try putting more !important tags?

Hi @loud-crowd-60573 I finally managed to create the custom loader. I managed to do it with this code in the css styler (view added document). I managed to do it by going back and forward with AI