Docs menu / Servers

Loading Screen - Custom CSS & HTML

The Loading Screen builder includes an Advanced - Custom Code section where you can inject your own CSS and HTML on top of the built-in layout. This page documents what’s available and gives you a few copy-paste starting points.

Limits and safety

Each field is capped at 8 KB.
<script> tags and inline on* event handlers are stripped from HTML on save and on render.
Custom CSS is appended after the built-in styles, so it can override any default. Use !important sparingly - usually selector specificity is enough.
Custom HTML is rendered below the main loading panel, above the “Powered by Zeros Host” footer.

Class hooks and keyframes

These already exist on the page - reuse them in your custom HTML or override them with custom CSS.

Name	What it does
`.zh-card`	The frosted-glass panel used for header / progress / rules / staff. Apply to your own divs to match the built-in look.
`.zh-shimmer-bar`	The progress bar fill. Has a moving shimmer overlay.
`@keyframes zh-fade-up`	Fade and rise. Used on every card on entry.
`@keyframes zh-pulse / zh-pulse2`	The two ambient glow loops behind the main panel.
`@keyframes zh-shimmer`	Left-to-right sweep used by the progress bar.
`@keyframes zh-dot-blink`	The three typing dots after the status text.
`@keyframes zh-spin-slow`	Slow 360° rotation. Useful for decorative rings.
`@keyframes zh-entrance-pulse`	Subtle scale-pulse you can apply to one-shot entrance elements.

Templates

Discord callout card

Adds a frosted card matching the rest of the screen with a Discord invite. Replace the invite text with your own.

HTML

<div class="zh-card" style="text-align: center;">
  <div style="font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.5); margin-bottom: 8px;">
    Join our Discord
  </div>
  <div style="font-size: 18px; font-weight: 700; color: #fff;">
    discord.gg/yourserver
  </div>
</div>

Recolour the cards (no theme change)

If you want the panels tinted (e.g. matching your Discord branding) without switching the theme. The selector is more specific than the default so no !important needed.

CSS

.zh-card {
    background: rgba(88, 101, 242, 0.06);
    border-color: rgba(88, 101, 242, 0.18);
}

A full-width banner that fades in and gently pulses. Reuses the built-in keyframes.

CSS

.zh-banner {
    text-align: center;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(123, 90, 255, 0.18), rgba(57, 111, 226, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    animation: zh-fade-up 0.6s ease both, zh-entrance-pulse 4s ease-in-out 1s infinite;
}

HTML

<div class="zh-banner">Double XP weekend - live now</div>

Custom font for the whole screen

Pull a font from a CDN (the loading screen runs in CEF and can fetch external resources).

CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

body, .zh-card {
    font-family: 'JetBrains Mono', monospace !important;
}

Tips

Open panel.zerosrp.co.uk/server/<id>/loading-screen in one tab and your live URL in another - save and refresh to iterate.
Inspect the live page in a browser to read the existing styles before overriding them.
Keep custom HTML small - the loading screen has a few seconds of attention at most.

Something missing or unclear? Ask in Discord or search the Help Centre.