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
Check here for a breakdown of the code
Single Product
Product List Custom Loader
Product List Example Skelton Loader
Code Breakdown for Single Product
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>
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!