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

Was this article helpful?

Thank you!