assets/css/loader.scss
{{ $params := .Site.Params }}
{{ $local_basic_families := default "" (delimit (apply (default slice $params.local_font.article) "printf" "'%s'" ".") ",") }}
{{ $basic_families := default $local_basic_families (delimit (apply (default slice $params.font.article) "printf" "'%s'" ".") ",") }}

$basic-families: {{ $basic_families }};
$local-basic-families: {{ $local_basic_families }};

{{- $custom_basic_font := .Site.Params.custom_font.article -}}
{{ $_custom_basic_families := slice }}
{{ range $custom_basic_font }}
  {{ $_custom_basic_families = $_custom_basic_families | append (default "" (printf "'%s'" .name)) }}
{{ end }}
{{ $custom_basic_families := delimit $_custom_basic_families "," }}


$custom-basic-families: {{ default $basic_families $custom_basic_families }};

$font-basic: $custom-basic-families, $basic-families, $local-basic-families;

[data-theme="dark"] {
  #loader {
    .loading-bg {
      background-color: rgba(37, 37, 37, 0.9);
    }

    .spinner-box .loading-word {
      color: var(--red-1, #ff5252);
    }
  }
}

#loader {
  .loading-bg {
    position: fixed;
    z-index: 1000;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    transition: 0.8s;
  }

  .loading-right-bg {
    right: 0;
  }

  .spinner-box {
    position: fixed;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    opacity: 1;
    transition: 0.5s;

    .loading-taichi {
      opacity: 0.8;
    }

    .rotate {
      animation: rotate-all 2s linear infinite;
    }

    .loading-word {
      position: absolute;
      color: var(--red-1, #ff5252);
      top: calc(50% + 110px);
      left: 50%;
      transform: translate(-50%, -50%);
      font:
        700 1.2rem $font-basic;
    }
  }
}

#loader.loading {
  .loading-left-bg {
    transform: translateX(-100%);
  }

  .loading-right-bg {
    transform: translateX(100%);
  }

  .spinner-box {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes rotate-all {
  to {
    transform: rotate(360deg);
  }
}
