Skip to main content
Version: 2.x

🖼 mlc-loading-animation

Web component to display a loading animation until one of its children has finished loading.

How it works​

The web component works by hiding its children with a spinning animation until one of them declares its readiness.

Practically speaking, the component injects a method called onload into each one of its children while hiding them setting their display style to none. When each child invoked the onload method, the component resets the original display style of the children and hides itself.

In most use cases, this component is used as a wrapper of micro-lc itself, which will call onload when its update lifecycle has ended upon connection and first render. It could also be useful when used as wrapper of micro-lc and some script tags they must be loaded before to view the page content.

Usage​

The component can be sourced from jsDelivr CDN.

To use the component in micro-lc wrap the micro-lc element tag in the HTML definition.

index.html
<!doctype html>
<html lang="en">
<head>
  <script async type="module" src="https://cdn.jsdelivr.net/npm/@micro-lc/orchestrator@latest/dist/micro-lc.production.js"></script>
  <script async type="module" src="https://cdn.jsdelivr.net/npm/@micro-lc/layout@latest/dist/mlc-loading-animation.js"></script>
</head>
<body>
  <mlc-loading-animation primary-color="#25b864">
    <micro-lc config-src="./config.json"></micro-lc>
  </mlc-loading-animation>
</body>

Properties & attributes​

PropertyAttributeTypeDescription
primaryColorprimary-colorstringColor of the animation. It can be Hex, 8-digit Hex, RGB, RGBA HSL, HSLA, HSV, HSVA, or CSS color name string.