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 Product lists or Full Modular Configurators as they have a different logic

Check here for a breakdown of the code

Code Breakdown

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 initialising

<style>
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();
});
</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 fill 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();
});
</script>

Updated on: 29/03/2024