Custom Loader

Show your own branded loading animation while the configurator starts. See working CodePen examples and a breakdown of the code you need.

Do you want to use your own custom loader while Mimeeq loads its configurator? To make the process easy, we have provided full code examples below.

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

---

Examples

Single product

CODEPEN CUSTOM LOADER CONFIGURATOR EXAMPLE

Product list

CODEPEN CUSTOM LOADER PRODUCT LIST EXAMPLE

Product list with skeleton loader

CODEPEN CUSTOM LOADER PRODUCT LIST EXAMPLE WITH SKELETON LOADER

---

Code breakdown for single product

You can also click Edit on CodePen to see any of the code snippets above.

Edit on CodePen button in the embedded example

1

Add the embed code

This is the embed code — replace it 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>

2

Hide the configurator until it has initialised

This part hides our configurator until it has finished initialising:

<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>

3

Add your own loader

Now just add your own loader to show while our configurator is initialising.

That's it — you've added your own custom loader.

---

Full example code

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>

---

Related articles

Custom UI

Build and deploy your own interface around the Mimeeq 3D configurator.

Performance

How Mimeeq delivers fast 3D configurators to customers worldwide.

Events & Tracking

Use configurator events to feed your own analytics.