ng-matero/ng-add/global-loader.js

Angular Material admin template

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.addLoaderToIndex = addLoaderToIndex;
const workspace_1 = require("@schematics/angular/utility/workspace");
const schematics_1 = require("@angular/cdk/schematics");
const utils_1 = require("../utils");
/** Adds the Material Design fonts to the index HTML file. */
function addLoaderToIndex(options) {
    return (host) => __awaiter(this, void 0, void 0, function* () {
        const workspace = yield (0, workspace_1.getWorkspace)(host);
        const project = (0, schematics_1.getProjectFromWorkspace)(workspace, options.project);
        const projectIndexFiles = (0, schematics_1.getProjectIndexFiles)(project);
        const loaderStyles = `
    .global-loader {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 1;
      transition: opacity .5s ease-in-out;
    }

    .global-loader-fade-out {
      opacity: 0;
    }

    .global-loader-hidden {
      display: none;
    }

    .global-loader h1 {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-weight: normal;
      font-size: 24px;
      letter-spacing: .04rem;
      white-space: pre;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image:
        repeating-linear-gradient(
          to right,
          #f44336,
          #9c27b0,
          #3f51b5,
          #03a9f4,
          #009688,
          #8bc34a,
          #ffeb3b,
          #ff9800
        );
      background-size: 750% auto;
      background-position: 0 100%;
      animation: gradient 20s infinite;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }

    @keyframes gradient {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -750% 0;
      }
    }
    `;
        const loaderHtml = `<div id="globalLoader" class="global-loader"><h1>LOADING</h1></div>`;
        projectIndexFiles.forEach(indexFilePath => {
            (0, utils_1.appendHtmlElement)(host, indexFilePath, `<style type="text/css">${loaderStyles}</style>`, 'head');
            (0, utils_1.appendHtmlElement)(host, indexFilePath, loaderHtml, 'body');
        });
    });
}
//# sourceMappingURL=global-loader.js.map