Customizing the embed loading icon

The following loading icon is shown when an embedded forum is initially loading:

It uses the following HTML and CSS code:

<style>
@keyframes wtLoadingIconSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
#wtLoadingIcon {
	display: block;
	border: 16px solid rgba(0,0,0,.1);
	border-top: 16px solid rgba(0,0,0,.5);
	border-radius: 100%;
	width: 100px;
	height: 100px;
	animation: wtLoadingIconSpin 1s linear infinite;
	margin: 50px auto;
}
</style>
<div id="wtLoadingIcon"></div>

You can customize it by adding CSS to the page of your website which embeds the forum. That CSS should target the #wtLoadingIcon element and should override the existing CSS.

Alternatively, you can use your own loading icon by giving it an ID of wtLoadingIcon and including it above the forum embed code in the page of your website which embeds the forum. The embed code will automatically use that instead of its own loading icon.

If you still need help, please contact us.