{% macro css() %}
  <!-- voila spinner -->
  <style>
    #loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 75vh;
        color: var(--jp-content-font-color1);
        font-family: sans-serif;
        z-index: 100;
        position: relative;
    }

    .spinner {
      animation: rotation 2s infinite linear;
      transform-origin: 50% 50%;
    }

    .spinner-container {
      width: 10%;
    }

    @keyframes rotation {
      from {transform: rotate(0deg);}
      to   {transform: rotate(359deg);}
    }

    .voila-spinner-color1{
      fill:#268380;
    }

    .voila-spinner-color2{
      fill:#f8e14b;
    }

    .voila-skeleton-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .voila-skeleton-post {
      width: 220px;
      height: 80px;
    }
    .voila-skeleton-post .voila-skeleton-avatar {
      float: left;
      width: 52px;
      height: 52px;
      background-color: var(--jp-layout-color1);
      border-radius: 25%;
      margin: 8px;
      background-image: linear-gradient(90deg, var(--jp-layout-color2) 0px, var(--jp-layout-color3) 40px, var(--jp-layout-color2) 80px);
      background-size: 600px;
      animation: shine-avatar 1.6s infinite linear;
    }
    .voila-skeleton-post .voila-skeleton-line {
      float: left;
      width: 140px;
      height: 16px;
      margin-top: 12px;
      border-radius: 7px;
      background-image: linear-gradient(90deg, var(--jp-layout-color2) 0px, var(--jp-layout-color3) 40px, var(--jp-layout-color2) 80px);
      background-size: 600px;
      animation: shine-lines 1.6s infinite linear;
    }
    .voila-skeleton-post .voila-skeleton-avatar + .voila-skeleton-line {
      margin-top: 11px;
      width: 100px;
    }
    .voila-skeleton-post .voila-skeleton-line ~ .voila-skeleton-line {
      background-color: var(--jp-layout-color2);
    }

    @keyframes shine-lines {
      0% {
        background-position: -100px;
      }
      40%, 100% {
        background-position: 140px;
      }
    }
    @keyframes shine-avatar {
      0% {
        background-position: -32px;
      }
      40%, 100% {
        background-position: 208px;
      }
    }
  </style>
{% endmacro %}

{% macro html() %}
  <div id="loading" style="display: flex;">
    <div class="spinner-container">
      <svg class="spinner" data-name="c1" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>voila</dc:title></cc:Work></rdf:RDF></metadata><title>spin</title><path class="voila-spinner-color1" d="m250 405c-85.47 0-155-69.53-155-155s69.53-155 155-155 155 69.53 155 155-69.53 155-155 155zm0-275.5a120.5 120.5 0 1 0 120.5 120.5 120.6 120.6 0 0 0-120.5-120.5z"/><path class="voila-spinner-color2" d="m250 405c-85.47 0-155-69.53-155-155a17.26 17.26 0 1 1 34.51 0 120.6 120.6 0 0 0 120.5 120.5 17.26 17.26 0 1 1 0 34.51z"/></svg>
    </div>
    <h2 id="loading_text">Running {{nb_title}}...</h2>
  </div>
{% endmacro %}