How to Use your Own Custom Loader
Do you want to use your own custom loader while Mimeeq loads its configurator?
To make the process easy we have provided a full code example below
Please note this only works on Standard and Hybrid Modular configurators, it will not work for Full Modular Configurators as they have a different logic. For Product lists, use the 'mimeeq-product-list-initialized' event instead of 'mimeeq-3d-product-initialized'.
Check here for a breakdown of the code
Single Product
Product List Custom Loader
Product List Example Skelton Loader
Code Breakdown for Single Product
You can also click on the Edit on codepen to see any of the above code snippets

This is the embed code, replace with your own
<mmq-embed short-code="U1X94N" template="Default-MDEMO" locale="en"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" rel="script" type="application/javascript" async></script>
This is the part that hides our configurator till its finished initializing
<style>
mmq-embed {
visibility: hidden;
opacity: 0;
}
.show {
opacity: 1;
visibility: visible;
}
</style>
<script>
document.addEventListener('mimeeq-3d-product-initialized', () => {
console.log('Mimeeq product list initialized');
const embed = document.querySelector('mmq-embed');
embed.classList.add('show');
const loader = document.querySelector('#loader');
loader.remove();
});
// Add this event to the one above, when using product list
document.addEventListener('mimeeq-product-list-initialized', () => {
const embed = document.querySelector('mmq-embed');
embed.classList.add('show');
const loader = document.querySelector('#loader');
loader.remove();
});
</script>
Now just add you own loader to show while our configurator is initialising and thats it, you aded your own custom loader
For reference here is the full code used for this example
<!-- This is the Embed Script for the product -->
<mmq-embed short-code="U1X94N" template="Default-MDEMO" locale="en"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" rel="script" type="application/javascript" async></script>
<!-- End Embed Script -->
<div id="loader" class="container">
<div class="holder">
<div class="box"></div>
</div>
<div class="holder">
<div class="box"></div>
</div>
<div class="holder">
<div class="box"></div>
</div>
</div>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 2000px;
transform: rotateX(-30deg) rotateY(-45deg);
}
.holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
transform: translate3d(0em, 3em, 1.5em);
}
.holder:last-child {
transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
}
.holder:first-child {
transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
}
.holder:nth-child(1) .box {
background-color: #1762d4;
}
.holder:nth-child(1) .box:before {
background-color: #0d3778;
}
.holder:nth-child(1) .box:after {
background-color: #124da6;
}
.holder:nth-child(2) .box {
background-color: #74A1E5;
}
.holder:nth-child(2) .box:before {
background-color: #2669cd;
}
.holder:nth-child(2) .box:after {
background-color: #4984dd;
}
.holder:nth-child(3) .box {
background-color: #BAD0F3;
}
.holder:nth-child(3) .box:before {
background-color: #6395e4;
}
.holder:nth-child(3) .box:after {
background-color: #8fb2eb;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
animation: ani-box 6s infinite;
width: 3em;
height: 3em;
}
.box:before, .box:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
}
.box:before {
left: 100%;
bottom: 0;
transform: rotateY(90deg);
transform-origin: 0 50%;
}
.box:after {
left: 0;
bottom: 100%;
transform: rotateX(90deg);
transform-origin: 0 100%;
}
@keyframes ani-box {
8.33% {
transform: translate3d(-50%, -50%, 0) scaleZ(2);
}
16.7% {
transform: translate3d(-50%, -50%, -3em) scaleZ(1);
}
25% {
transform: translate3d(-50%, -100%, -3em) scaleY(2);
}
33.3% {
transform: translate3d(-50%, -150%, -3em) scaleY(1);
}
41.7% {
transform: translate3d(-100%, -150%, -3em) scaleX(2);
}
50% {
transform: translate3d(-150%, -150%, -3em) scaleX(1);
}
58.3% {
transform: translate3d(-150%, -150%, 0) scaleZ(2);
}
66.7% {
transform: translate3d(-150%, -150%, 0) scaleZ(1);
}
75% {
transform: translate3d(-150%, -100%, 0) scaleY(2);
}
83.3% {
transform: translate3d(-150%, -50%, 0) scaleY(1);
}
91.7% {
transform: translate3d(-100%, -50%, 0) scaleX(2);
}
100% {
transform: translate3d(-50%, -50%, 0) scaleX(1);
}
}
mmq-embed {
visibility: hidden;
opacity: 0;
}
.show {
opacity: 1;
visibility: visible;
}
</style>
<script>
document.addEventListener('mimeeq-3d-product-initialized', () => {
const embed = document.querySelector('mmq-embed');
embed.classList.add('show');
const loader = document.querySelector('#loader');
loader.remove();
});
// Add this event listener, when using product list
document.addEventListener('mimeeq-product-list-initialized', () => {
const embed = document.querySelector('mmq-embed');
embed.classList.add('show');
const loader = document.querySelector('#loader');
loader.remove();
});
</script>
Updated on: 16/05/2025
Thank you!