Matryoshka (Russian Doll) Loading Mixin

[ This description is mirrored from at on 2019-05-22 ]

Matryoshka Loading Mixin

Defines a loading flag for elements that automatically take into account the loading state of its child elements.

The element implementing MatryoshkaLoaderMixin gains a few interesting Boolean properties:

  • hostLoading (flag to be set when your element is loading)
  • loading (this.hostLoading || this._areChildrenLoading())
  • loaded (!loading)
<mixin-loader-element countdown="2000">
  <mixin-loader-element countdown="3000">1</mixin-loader-element>
  <mixin-loader-element countdown="5000" defer>
      <mixin-loader-element countdown="10000">1</mixin-loader-element>

Implementing it your own element

class YourCustomElement extends MatryoshkaLoaderMixin(Polymer.Element) {
  static get is() { return 'your-custom-element' }
  connectedCallback() {
    //Do your expensive operation => {
      //When you're done:
      this.hostLoading = false;
customElements.define(, YourCustomElement)


Link to this version
ImportedReleased 12 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save reach-digital/polymer-matryoshka-loader"#0.8.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.8.0


  • polymer#^2.0.2