[
  {
    "path": ".editorconfig",
    "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".gitignore",
    "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\ntestem.log\n/typings\n\n# e2e\n/e2e/*.js\n/e2e/*.map\n\n# System Files\n.DS_Store\nThumbs.db\n"
  },
  {
    "path": ".npmignore",
    "content": "/.idea\n/node_modules\n/dist\n.travis.yml\ntsconfig.json\ntslint.json\n/e2e\n/src/test.ts\n/src/tsconfig.app.json\n/src/environments/\n/src/typings.d.ts\n/src/tsconfig.spec.json\nkarma.conf.js\nprotractor.conf.js\nyarn.lock\n"
  },
  {
    "path": ".travis.yml",
    "content": "sudo: required\ndist: trusty\nlanguage: node_js\nnode_js:\n  - '8.0.0'\n\naddons:\napt:\n  sources:\n    - google-chrome\n  packages:\n    - google-chrome-stable\n    - google-chrome-beta\n\nbefore_install:\n  - export CHROME_BIN=chromium-browser\n  - export DISPLAY=:99.0\n  - sh -e /etc/init.d/xvfb start\n\nbefore_script:\n- npm install -g angular-cli\n- npm install -g karma\n- npm install\n- ng build\n\nscript: karma start karma.conf.js --single-run\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2018 Richard Afro\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Angular Epic Spinners\n[![npm](https://img.shields.io/npm/dm/angular-epic-spinners.svg)]() [![npm](https://img.shields.io/npm/l/angular-epic-spinners.svg)]() [![npm](https://img.shields.io/npm/v/angular-epic-spinners.svg)]()\n\nReusable angular components for epic spinners\n\n## Demo\nVisit the [demo](http://hackafro.github.io/angular-epic-spinners/) page to see spinners in action \n\n## Installation\n\n`npm install --save angular-epic-spinners`\n\nOR\n\n`yarn install angular-epic-spinners`\n\n## Usage\nExample \n\nImport each spinners' module into your module file and use the spinner component anywhere. \n\n```typescript  \n  import {AtomSpinnerModule} from 'angular-epic-spinners'\n  \n  @NgModule({\n    imports: [AtomSpinnerModule]\n  })\n```\n\nThen in your html file\n\n```html  \n  <app-atom-spinner\n     [animationDuration]=\"1000\"\n     [size]=\"60\"\n     [color]=\"'#ff1d5e'\"\n    ></app-atom-spinner>\n```\n\n## Components list\nYou can easily configure spinners' size, color and animation speed\n\n```html\n<app-flower-spinner\n  [animationDuration]=\"2500\"\n  [size]=\"70\"\n  [color]=\"'#ff1d5e'\"\n></app-flower-spinner>\n\n<app-pixel-spinner\n  [animationDuration]=\"2000\"\n  [pixelSize]=\"70\"\n  [color]=\"'#ff1d5e'\"\n></app-pixel-spinner>\n\n<app-hollow-dots-spinner\n  [animationDuration]=\"1000\"\n  [dotSize]=\"15\"\n  [dotsNum]=\"3\"\n  [color]=\"'#ff1d5e'\"\n></app-hollow-dots-spinner>\n\n<app-intersecting-circles-spinner\n  [animationDuration]=\"1200\"\n  [size]=\"70\"\n  [color]=\"'#ff1d5e'\"\n></app-intersecting-circles-spinner>\n\n<app-orbit-spinner\n  [animationDuration]=\"1200\"\n  [size]=\"55\"\n  [color]=\"'#ff1d5e'\"\n></app-orbit-spinner>\n\n<app-radar-spinner\n  [animationDuration]=\"2000\"\n  [size]=\"60\"\n  [color]=\"'#ff1d5e'\"\n></app-radar-spinner>\n\n<app-scaling-squares-spinner\n  [animationDuration]=\"1250\"\n  [size]=\"65\"\n  [color]=\"'#ff1d5e'\"\n></app-scaling-squares-spinner>\n\n<app-half-circle-spinner\n  [animationDuration]=\"1000\"\n  [size]=\"60\"\n  [color]=\"'#ff1d5e'\"\n></app-half-circle-spinner>\n\n<app-trinity-rings-spinner\n  [animationDuration]=\"1500\"\n  [size]=\"66\"\n  [color]=\"'#ff1d5e'\"\n></app-trinity-rings-spinner>\n\n<app-fulfilling-square-spinner\n  [animationDuration]=\"4000\"\n  [size]=\"50\"\n  [color]=\"'#ff1d5e'\"\n></app-fulfilling-square-spinner>\n\n<app-circles-to-rhombuses-spinner\n  [animationDuration]=\"1200\"\n  [circlesNum]=\"3\"\n  [circleSize]=\"15\"\n  [color]=\"'#ff1d5e'\"\n></app-circles-to-rhombuses-spinner>\n    \n<app-semipolar-spinner\n  [animationDuration]=\"2000\"\n  [size]=\"65\"\n  [color]=\"'#ff1d5e'\"\n></app-semipolar-spinner>\n    \n<app-self-building-square-spinner\n  [animationDuration]=\"6000\"\n  [size]=\"40\"\n  [color]=\"'#ff1d5e'\"\n></app-self-building-square-spinner>\n    \n<app-swapping-squares-spinner\n  [animationDuration]=\"1000\"\n  [size]=\"65\"\n  [color]=\"'#ff1d5e'\"\n></app-swapping-squares-spinner>\n\n<app-fulfilling-bouncing-circle-spinner\n  [animationDuration]=\"4000\"\n  [size]=\"60\"\n  [color]=\"'#ff1d5e'\"\n></app-fulfilling-bouncing-circle-spinner>\n\n<app-fingerprint-spinner\n  [animationDuration]=\"1500\"\n  [size]=\"64\"\n  [color]=\"'#ff1d5e'\"\n></app-fingerprint-spinner>\n\n<app-spring-spinner\n  [animationDuration]=\"3000\"\n  [size]=\"60\"\n  [color]=\"'#ff1d5e'\"\n></app-spring-spinner>\n\n<app-atom-spinner\n  [animationDuration]=\"1000\"\n  [size]=\"60\"\n  [color]=\"'#ff1d5e'\"\n></app-atom-spinner>\n\n<app-looping-rhombuses-spinner\n  [animationDuration]=\"2500\"\n  [rhombusSize]=\"15\"\n  [color]=\"'#ff1d5e'\"\n></app-looping-rhombuses-spinner>\n\n<app-breeding-rhombus-spinner\n  [animationDuration]=\"2000\"\n  [size]=\"65\"\n  [color]=\"'#ff1d5e'\"\n/><app-breeding-rhombus-spinner>\n```\n## Support?\n- Star the repo :star:\n- Create pull requests \n- Follow me on twitter [@iamAfro](https://twitter.com/iamafro)\n\n## License\n[MIT](https://github.com/HackAfro/angular-epic-spinners/blob/v1.0.3/LICENSE) license.\n\n\n\n"
  },
  {
    "path": "angular.json",
    "content": "{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"angular-epic-spinners\": {\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"projectType\": \"application\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            \"outputPath\": \"dist\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"tsConfig\": \"src/tsconfig.app.json\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"assets\": [\n              \"src/assets\",\n              \"src/favicon.ico\"\n            ],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"production\": {\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true,\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ]\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"options\": {\n            \"browserTarget\": \"angular-epic-spinners:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"angular-epic-spinners:build:production\"\n            }\n          }\n        },\n        \"extract-i18n\": {\n          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n          \"options\": {\n            \"browserTarget\": \"angular-epic-spinners:build\"\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"karmaConfig\": \"./karma.conf.js\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"src/tsconfig.spec.json\",\n            \"scripts\": [],\n            \"styles\": [\n              \"src/styles.css\"\n            ],\n            \"assets\": [\n              \"src/assets\",\n              \"src/favicon.ico\"\n            ]\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"src/tsconfig.app.json\",\n              \"src/tsconfig.spec.json\"\n            ],\n            \"exclude\": [\n              \"**/node_modules/**\"\n            ]\n          }\n        }\n      }\n    },\n    \"angular-epic-spinners-e2e\": {\n      \"root\": \"\",\n      \"sourceRoot\": \"e2e\",\n      \"projectType\": \"application\",\n      \"architect\": {\n        \"e2e\": {\n          \"builder\": \"@angular-devkit/build-angular:protractor\",\n          \"options\": {\n            \"protractorConfig\": \"./protractor.conf.js\",\n            \"devServerTarget\": \"angular-epic-spinners:serve\"\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"e2e/tsconfig.e2e.json\"\n            ],\n            \"exclude\": [\n              \"**/node_modules/**\"\n            ]\n          }\n        }\n      }\n    }\n  },\n  \"defaultProject\": \"angular-epic-spinners\",\n  \"schematics\": {\n    \"@schematics/angular:component\": {\n      \"prefix\": \"app\",\n      \"styleext\": \"scss\"\n    },\n    \"@schematics/angular:directive\": {\n      \"prefix\": \"app\"\n    }\n  }\n}"
  },
  {
    "path": "e2e/app.e2e-spec.ts",
    "content": "import { AppPage } from './app.po';\n\ndescribe('angular-epic-spinners App', () => {\n  let page: AppPage;\n\n  beforeEach(() => {\n    page = new AppPage();\n  });\n\n  it('should display welcome message', () => {\n    page.navigateTo();\n    expect(page.getParagraphText()).toEqual('Welcome to app!');\n  });\n});\n"
  },
  {
    "path": "e2e/app.po.ts",
    "content": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n  navigateTo() {\n    return browser.get('/');\n  }\n\n  getParagraphText() {\n    return element(by.css('app-root h1')).getText();\n  }\n}\n"
  },
  {
    "path": "e2e/tsconfig.e2e.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/e2e\",\n    \"baseUrl\": \"./\",\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"types\": [\n      \"jasmine\",\n      \"jasminewd2\",\n      \"node\"\n    ]\n  }\n}\n"
  },
  {
    "path": "karma.conf.js",
    "content": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-file.html\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: '',\n    frameworks: ['jasmine', '@angular-devkit/build-angular'],\n    plugins: [\n      require('karma-jasmine'),\n      require('karma-chrome-launcher'),\n      require('karma-jasmine-html-reporter'),\n      require('karma-coverage-istanbul-reporter'),\n      require('@angular-devkit/build-angular/plugins/karma')\n    ],\n    client:{\n      clearContext: false // leave Jasmine Spec Runner output visible in browser\n    },\n    coverageIstanbulReporter: {\n      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],\n      fixWebpackSourcePaths: true\n    },\n    \n    reporters: ['progress', 'kjhtml'],\n    port: 9876,\n    colors: true,\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: ['Chrome'],\n    singleRun: false\n  });\n};\n"
  },
  {
    "path": "ng-package.json",
    "content": "{\n  \"$schema\": \"./node_modules/ng-packagr/ng-package.schema.json\",\n  \"lib\": {\n    \"entryFile\": \"public_api.ts\"\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"angular-epic-spinners\",\n  \"version\": \"2.0.0\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build --prod --base-href \\\"https://hackafro.github.io/angular-epic-spinners/\\\"\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\",\n    \"packagr\": \"ng-packagr -p ng-package.json\",\n    \"deploy\": \"npm run build && ngh\",\n    \"pack\": \"npm pack\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/hackafro/angular-epic-spinners\"\n  },\n  \"author\": \"iamAfro <richyafro@gmail.com>\",\n  \"url\": \"https://github.com/hackafro/angular-epic-spinners\",\n  \"private\": false,\n  \"devDependencies\": {\n    \"@angular/core\": \"^7.0.1\",\n    \"@angular-devkit/build-angular\": \"~0.6.8\",\n    \"@angular/animations\": \"^7.0.1\",\n    \"@angular/cli\": \"^7.0.3\",\n    \"@angular/common\": \"^7.0.1\",\n    \"@angular/compiler\": \"^7.0.1\",\n    \"@angular/compiler-cli\": \"^7.0.1\",\n    \"@angular/forms\": \"^7.0.1\",\n    \"@angular/http\": \"^7.0.1\",\n    \"@angular/language-service\": \"^7.0.1\",\n    \"@angular/platform-browser\": \"^7.0.1\",\n    \"@angular/platform-browser-dynamic\": \"^7.0.1\",\n    \"@types/node\": \"~6.0.60\",\n    \"angular-cli-ghpages\": \"^0.5.2\",\n    \"codelyzer\": \"^4.0.1\",\n    \"concurrently\": \"^3.5.1\",\n    \"core-js\": \"^2.4.1\",\n    \"ng-packagr\": \"^4.4.0\",\n    \"rxjs\": \"^6.2.0\",\n    \"rxjs-compat\": \"^6.0.0-rc.0\",\n    \"ts-node\": \"~3.2.0\",\n    \"tsickle\": \"^0.33.1\",\n    \"tslib\": \"^1.9.0\",\n    \"tslint\": \"~5.7.0\",\n    \"typescript\": \"3.1\",\n    \"zone.js\": \"^0.8.26\"\n  }\n}\n"
  },
  {
    "path": "protractor.conf.js",
    "content": "// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib/config.ts\n\nconst { SpecReporter } = require('jasmine-spec-reporter');\n\nexports.config = {\n  allScriptsTimeout: 11000,\n  specs: [\n    './e2e/**/*.e2e-spec.ts'\n  ],\n  capabilities: {\n    'browserName': 'chrome'\n  },\n  directConnect: true,\n  baseUrl: 'http://localhost:4200/',\n  framework: 'jasmine',\n  jasmineNodeOpts: {\n    showColors: true,\n    defaultTimeoutInterval: 30000,\n    print: function() {}\n  },\n  onPrepare() {\n    require('ts-node').register({\n      project: 'e2e/tsconfig.e2e.json'\n    });\n    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));\n  }\n};\n"
  },
  {
    "path": "public_api.ts",
    "content": "export * from './src/app/atom-spinner/atom-spinner.module';\nexport * from './src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module';\nexport * from './src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module';\nexport * from './src/app/fingerprint-spinner/fingerprint-spinner.module';\nexport * from './src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module';\nexport * from './src/app/flower-spinner/flower-spinner.module';\nexport * from './src/app/fulfilling-square-spinner/fulfilling-square-spinner.module';\nexport * from './src/app/half-circle-spinner/half-circle-spinner.module';\nexport * from './src/app/hollow-dots-spinner/hollow-dots-spinner.module';\nexport * from './src/app/intersecting-circles-spinner/intersecting-circles-spinner.module';\nexport * from './src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module';\nexport * from './src/app/orbit-spinner/orbit-spinner.module';\nexport * from './src/app/pixel-spinner/pixel-spinner.module';\nexport * from './src/app/radar-spinner/radar-spinner.module';\nexport * from './src/app/scaling-squares-spinner/scaling-squares-spinner.module';\nexport * from './src/app/self-building-square-spinner/self-building-square-spinner.module';\nexport * from './src/app/semipolar-spinner/semipolar-spinner.module';\nexport * from './src/app/spring-spinner/spring-spinner.module';\nexport * from './src/app/swapping-squares-spinner/swapping-squares-spinner.module';\nexport * from './src/app/trinity-rings-spinner/trinity-rings-spinner.module';\n"
  },
  {
    "path": "src/app/app.component.html",
    "content": "<!--The content below is only a placeholder and can be replaced.-->\n<div class=\"main-container\">\n  <div class=\"title-holder\">\n    <h1 class=\"header\">Angular Epic Spinners</h1>\n    <h5 class=\"sub-header\">Angular Implementation of\n      <a class=\"link\" href=\"http://epic-spinners.epicmax.co/\" target=\"_blank\">Epic Spinners\n      </a>\n    </h5>\n\n    <div class=\"get-started\">\n      <div class=\"get-started__docs\">\n        <h4>Get started</h4>\n        <a href=\"https://github.com/hackafro/angular-epic-spinners\" class=\"docs\">Docs</a>\n      </div>\n      <div class=\"get-started-code\">\n        <p>npm install angular-epic-spinners</p>\n        <p>yarn add angular-epic-spinners</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-atom-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"2000\"></app-atom-spinner>\n    </div>\n    <div class=\"name\">\n      Atom Spinner\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-breeding-rhombus-spinner [color]=\"'#ff1d5e'\" [size]=\"65\" [animationDuration]=\"2000\"></app-breeding-rhombus-spinner>\n    </div>\n    <div class=\"name\">\n      Breeding Rhombus\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-circles-to-rhumbuses-spinner [color]=\"'#ff1d5e'\" [circleSize]=\"15\" [circlesNum]=\"3\" [animationDuration]=\"1200\"></app-circles-to-rhumbuses-spinner>\n    </div>\n    <div class=\"name\">\n      Circles to rhumbuses\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-fingerprint-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1200\"></app-fingerprint-spinner>\n    </div>\n    <div class=\"name\">\n      Fingerprint Spinner\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-flower-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1200\"></app-flower-spinner>\n    </div>\n    <div class=\"name\">\n      Flower Spinner\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-fulfilling-bouncing-circle-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"2000\"></app-fulfilling-bouncing-circle-spinner>\n    </div>\n    <div class=\"name\">\n      Fulfilling Bouncing Circle\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-fulfilling-square-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1200\"></app-fulfilling-square-spinner>\n    </div>\n    <div class=\"name\">\n      Fulfilling Square\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-half-circle-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-half-circle-spinner>\n    </div>\n    <div class=\"name\">\n      Half Circle Spinner\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-hollow-dots-spinner [color]=\"'#ff1d5e'\" [dotSize]=\"15\" [dotsNum]=\"3\" [animationDuration]=\"1400\"></app-hollow-dots-spinner>\n    </div>\n    <div class=\"name\">\n      Hollow Dots Spinner\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-intersecting-circles-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-intersecting-circles-spinner>\n    </div>\n    <div class=\"name\">\n      Intersecting Circles\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-looping-rhombuses-spinner [color]=\"'#ff1d5e'\" [rhombusSize]=\"15\" [animationDuration]=\"1200\"></app-looping-rhombuses-spinner>\n    </div>\n    <div class=\"name\">\n      Looping Rhombuses\n    </div>\n  </div>\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-orbit-spinner [color]=\"'#ff1d5e'\" [size]=\"55\" [animationDuration]=\"1400\"></app-orbit-spinner>\n    </div>\n    <div class=\"name\">\n      Orbit Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-pixel-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-pixel-spinner>\n    </div>\n    <div class=\"name\">\n      Pixel Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-radar-spinner [size]=\"70\" [color]=\"'#ff1d5e'\" [animationDuration]=\"1200\"></app-radar-spinner>\n    </div>\n    <div class=\"name\">\n      Radar Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-scaling-squares-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1200\"></app-scaling-squares-spinner>\n    </div>\n    <div class=\"name\">\n      Scaling Squares Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-self-building-square-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-self-building-square-spinner>\n    </div>\n    <div class=\"name\">\n      Self Building Square\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-semipolar-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-semipolar-spinner>\n    </div>\n    <div class=\"name\">\n      SemiPolar Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-spring-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-spring-spinner>\n    </div>\n    <div class=\"name\">\n      Spring Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-swapping-squares-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1400\"></app-swapping-squares-spinner>\n    </div>\n    <div class=\"name\">\n      Swapping Squares Spinner\n    </div>\n  </div>\n\n  <div class=\"spinner-holder\">\n    <div class=\"spinner-element\">\n      <app-trinity-rings-spinner [color]=\"'#ff1d5e'\" [size]=\"70\" [animationDuration]=\"1200\"></app-trinity-rings-spinner>\n    </div>\n    <div class=\"name\">\n      Trinity Rings Spinner\n    </div>\n  </div>\n</div>\n\n<footer>\n  <h4>By\n    <a href=\"https://github.com/hackafro\" class=\"link\">@hackAfro</a>\n  </h4>\n  <p>This project is an implementation of the\n    <a href=\"https://github.com/epicmaxco/epic-spinners\" target=\"_blank\" class=\"link\">Epic Spinners</a> project created by\n    <a href=\"https://github.com/epicmaxco\" target=\"_blank\" class=\"link\">EpicMaxCo</a>\n  </p>\n</footer>\n"
  },
  {
    "path": "src/app/app.component.scss",
    "content": "// I changed this file to scss to enable me display the name on hover.\n// The implementation was easier and more readable with scss\n\n.main-container {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 20px;\n  width: 90%;\n  margin: 0 auto;\n\n  .title-holder {\n    width: 100%;\n    margin: 30px 0;\n\n    .header {\n      color: whitesmoke;\n      opacity: .80;\n      text-transform: uppercase;\n      font-size: 25px;\n      margin-bottom: 3px;\n      text-align: center;\n    }\n\n    .sub-header {\n      color: whitesmoke;\n      opacity: .60;\n      font-size: 18px;\n      text-align: center;\n      margin: 5px 0;\n    }\n  }\n}\n\n.link {\n  color: #ff1d5e;\n  text-decoration: none;\n  text-transform: uppercase;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n.get-started {\n  margin-top: 50px;\n\n  .get-started__docs {\n    display: flex;\n    justify-content: center;\n\n    h4 {\n      color: #9e3050;\n      margin: 20px 10px;\n      text-align: center;\n      display: inline-block;\n    }\n\n    .docs {\n      @extend h4;\n      margin-left: 10px;\n      text-transform: uppercase;\n    }\n  }\n\n  .get-started-code {\n    background: #030810 + 40;\n    color: whitesmoke;\n    padding: 10px 40px;\n    text-align: center;\n    width: fit-content;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border-radius: 3px;\n\n    p {\n      margin: 10px 0;\n      font-size: 13px;\n    }\n  }\n}\n\n.spinner-holder {\n  width: 20%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 25px 10px;\n  margin: 30px 0;\n  min-height: 150px;\n\n  &:hover {\n    .name {\n      display: block;\n    }\n    background: white;\n    -webkit-border-radius: 5px;\n    -moz-border-radius: 5px;\n    border-radius: 5px;\n    box-shadow: 1px 4px 5px 0 #9e3050;\n  }\n}\n\n.name {\n  display: none;\n  padding: 10px 0;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.3);\n  font-weight: bold;\n  text-transform: uppercase;\n  margin: 15px 0 0;\n}\n\nfooter{\n  padding: 30px 55px;\n  background: #030810 + 45;\n  color: whitesmoke;\n\n  h4{\n    margin: 10px 0;\n  }\n\n  p{\n    font-size: 14px;\n  }\n  a{\n    text-transform: capitalize;\n  }\n}\n\n@media (max-width: 675px) {\n  .spinner-holder{\n    width: 40%;\n  }\n  footer{\n    padding: 20px 15px;\n\n    p{\n      font-size: 12px;\n    }\n  }\n\n}\n"
  },
  {
    "path": "src/app/app.component.spec.ts",
    "content": "import { TestBed, async } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\ndescribe('AppComponent', () => {\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [\n        AppComponent\n      ],\n    }).compileComponents();\n  }));\n  it('should create the app', async(() => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app).toBeTruthy();\n  }));\n  it(`should have as title 'app'`, async(() => {\n    const fixture = TestBed.createComponent(AppComponent);\n    const app = fixture.debugElement.componentInstance;\n    expect(app.title).toEqual('app');\n  }));\n  it('should render title in a h1 tag', async(() => {\n    const fixture = TestBed.createComponent(AppComponent);\n    fixture.detectChanges();\n    const compiled = fixture.debugElement.nativeElement;\n    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');\n  }));\n});\n"
  },
  {
    "path": "src/app/app.component.ts",
    "content": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  title = 'apps';\n}\n\n\n"
  },
  {
    "path": "src/app/app.module.ts",
    "content": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n\nimport { AppComponent } from './app.component';\nimport {AtomSpinnerModule} from './atom-spinner/atom-spinner.module';\nimport {BreedingRhombusSpinnerModule} from './breeding-rhombus-spinner/breeding-rhombus-spinner.module';\nimport {FlowerSpinnerModule} from './flower-spinner/flower-spinner.module';\nimport {FulfillingBouncingCircleSpinnerModule} from './fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module';\nimport {FulfillingSquareSpinnerModule} from './fulfilling-square-spinner/fulfilling-square-spinner.module';\nimport {HalfCircleSpinnerModule} from './half-circle-spinner/half-circle-spinner.module';\nimport {LoopingRhumbusesSpinnerModule} from './looping-rhombuses-spinner/looping-rhumbuses-spinner.module';\nimport {IntersectingCirclesSpinnerModule} from './intersecting-circles-spinner/intersecting-circles-spinner.module';\nimport {HollowDotsSpinnerModule} from './hollow-dots-spinner/hollow-dots-spinner.module';\nimport {PixelSpinnerModule} from './pixel-spinner/pixel-spinner.module';\nimport {OrbitSpinnerModule} from './orbit-spinner/orbit-spinner.module';\nimport {ScalingSquaresSpinnerModule} from './scaling-squares-spinner/scaling-squares-spinner.module';\nimport {SemipolarSpinnerModule} from './semipolar-spinner/semipolar-spinner.module';\nimport {SelfBuildingSquareSpinnerModule} from './self-building-square-spinner/self-building-square-spinner.module';\nimport {SwappingSquaresSpinnerModule} from './swapping-squares-spinner/swapping-squares-spinner.module';\nimport {RadarSpinnerModule} from './radar-spinner/radar-spinner.module';\nimport {SpringSpinnerModule} from './spring-spinner/spring-spinner.module';\nimport {TrinityRingsSpinnerModule} from './trinity-rings-spinner/trinity-rings-spinner.module';\nimport {CirclesToRhumbusesSpinnerModule} from './circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module';\nimport {FingerprintSpinnerModule} from './fingerprint-spinner/fingerprint-spinner.module';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AtomSpinnerModule,\n    BreedingRhombusSpinnerModule,\n    CirclesToRhumbusesSpinnerModule,\n    FingerprintSpinnerModule,\n    FlowerSpinnerModule,\n    FulfillingBouncingCircleSpinnerModule,\n    FulfillingSquareSpinnerModule,\n    HalfCircleSpinnerModule,\n    HollowDotsSpinnerModule,\n    IntersectingCirclesSpinnerModule,\n    LoopingRhumbusesSpinnerModule,\n    OrbitSpinnerModule,\n    PixelSpinnerModule,\n    RadarSpinnerModule,\n    ScalingSquaresSpinnerModule,\n    SelfBuildingSquareSpinnerModule,\n    SemipolarSpinnerModule,\n    SpringSpinnerModule,\n    SwappingSquaresSpinnerModule,\n    TrinityRingsSpinnerModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n"
  },
  {
    "path": "src/app/atom-spinner/atom-spinner.component.css",
    "content": ".atom-spinner,\n.atom-spinner * {\n  box-sizing: border-box;\n}\n\n.atom-spinner {\n  height: 60px;\n  width: 60px;\n  overflow: hidden;\n}\n\n.atom-spinner .spinner-inner {\n  position: relative;\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.atom-spinner .spinner-circle {\n  display: block;\n  position: absolute;\n  color: #ff1d5e;\n  font-size: calc(60px * 0.24);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.atom-spinner .spinner-line {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  animation-duration: 1s;\n  border-left-width: calc(60px / 25);\n  border-top-width: calc(60px / 25);\n  border-left-color: #ff1d5e;\n  border-left-style: solid;\n  border-top-style: solid;\n  border-top-color: transparent;\n}\n\n.atom-spinner .spinner-line:nth-child(1) {\n  animation: atom-spinner-animation-1 1s linear infinite;\n  transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);\n}\n\n.atom-spinner .spinner-line:nth-child(2) {\n  animation: atom-spinner-animation-2 1s linear infinite;\n  transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);\n}\n\n.atom-spinner .spinner-line:nth-child(3) {\n  animation: atom-spinner-animation-3 1s linear infinite;\n  transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);\n}\n\n@keyframes atom-spinner-animation-1 {\n  100% {\n    transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);\n  }\n}\n\n@keyframes atom-spinner-animation-2 {\n  100% {\n    transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);\n  }\n}\n\n@keyframes atom-spinner-animation-3 {\n  100% {\n    transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);\n  }\n}\n"
  },
  {
    "path": "src/app/atom-spinner/atom-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { AtomSpinnerComponent } from './atom-spinner.component';\n\ndescribe('AtomSpinnerComponent', () => {\n  let component: AtomSpinnerComponent;\n  let fixture: ComponentFixture<AtomSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ AtomSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(AtomSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/atom-spinner/atom-spinner.component.ts",
    "content": "import {Component, OnInit, Input} from '@angular/core';\n\n@Component({\n  selector: 'app-atom-spinner',\n  template: `\n      <div class=\"atom-spinner\" [ngStyle]=\"spinnerStyle\">\n        <div class=\"spinner-inner\">\n          <div class=\"spinner-line\" [ngStyle]=\"lineStyle\"></div>\n          <div class=\"spinner-line\" [ngStyle]=\"lineStyle\"></div>\n          <div class=\"spinner-line\" [ngStyle]=\"lineStyle\"></div>\n          <div class=\"spinner-circle\" [ngStyle]=\"circleStyle\">\n            &#9679;\n          </div>\n        </div>\n      </div>\n  `,\n  styleUrls: ['./atom-spinner.component.css']\n})\nexport class AtomSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 60;\n  @Input() animationDuration = 1000;\n  @Input() color = 'red';\n\n  get spinnerStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get circleStyle() {\n    return {\n      color: this.color,\n      fontSize: `${this.size * 0.24}px`\n    };\n  }\n\n  get lineStyle() {\n    return {\n      animationDuration: `${this.animationDuration}ms`,\n      borderLeftWidth: `${this.size / 25}px`,\n      borderRightWidth: `${this.size / 25}px`,\n      borderLeftColor: this.color\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/atom-spinner/atom-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {AtomSpinnerComponent} from './atom-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [AtomSpinnerComponent],\n  declarations: [AtomSpinnerComponent],\n  providers: [],\n})\nexport class AtomSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.css",
    "content": " .breeding-rhombus-spinner {\n   height: 65px;\n   width: 65px;\n   position: relative;\n   transform: rotate(45deg);\n }\n\n .breeding-rhombus-spinner,\n .breeding-rhombus-spinner * {\n   box-sizing: border-box;\n }\n\n .breeding-rhombus-spinner .rhombus {\n   height: calc(65px / 7.5);\n   width: calc(65px / 7.5);\n   animation-duration: 2000ms;\n   top: calc(65px / 2.3077);\n   left: calc(65px / 2.3077);\n   background-color: #ff1d5e;\n   position: absolute;\n   animation-iteration-count: infinite;\n }\n\n .breeding-rhombus-spinner .rhombus:nth-child(2n+0) {\n   margin-right: 0;\n }\n\n .breeding-rhombus-spinner .rhombus.child-1 {\n   animation-name: breeding-rhombus-spinner-animation-child-1;\n   animation-delay: calc(100ms * 1);\n }\n\n .breeding-rhombus-spinner .rhombus.child-2 {\n   animation-name: breeding-rhombus-spinner-animation-child-2;\n   animation-delay: calc(100ms * 2);\n }\n\n .breeding-rhombus-spinner .rhombus.child-3 {\n   animation-name: breeding-rhombus-spinner-animation-child-3;\n   animation-delay: calc(100ms * 3);\n }\n\n .breeding-rhombus-spinner .rhombus.child-4 {\n   animation-name: breeding-rhombus-spinner-animation-child-4;\n   animation-delay: calc(100ms * 4);\n }\n\n .breeding-rhombus-spinner .rhombus.child-5 {\n   animation-name: breeding-rhombus-spinner-animation-child-5;\n   animation-delay: calc(100ms * 5);\n }\n\n .breeding-rhombus-spinner .rhombus.child-6 {\n   animation-name: breeding-rhombus-spinner-animation-child-6;\n   animation-delay: calc(100ms * 6);\n }\n\n .breeding-rhombus-spinner .rhombus.child-7 {\n   animation-name: breeding-rhombus-spinner-animation-child-7;\n   animation-delay: calc(100ms * 7);\n }\n\n .breeding-rhombus-spinner .rhombus.child-8 {\n   animation-name: breeding-rhombus-spinner-animation-child-8;\n   animation-delay: calc(100ms * 8);\n }\n\n .breeding-rhombus-spinner .rhombus.big {\n   height: calc(65px / 3);\n   width: calc(65px / 3);\n   animation-duration: 2000ms;\n   top: calc(65px / 3);\n   left: calc(65px / 3);\n   background-color: #ff1d5e;\n   animation: breeding-rhombus-spinner-animation-child-big 2s infinite;\n   animation-delay: 0.5s;\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-1 {\n   50% {\n     transform: translate(-325%, -325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-2 {\n   50% {\n     transform: translate(0, -325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-3 {\n   50% {\n     transform: translate(325%, -325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-4 {\n   50% {\n     transform: translate(325%, 0);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-5 {\n   50% {\n     transform: translate(325%, 325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-6 {\n   50% {\n     transform: translate(0, 325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-7 {\n   50% {\n     transform: translate(-325%, 325%);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-8 {\n   50% {\n     transform: translate(-325%, 0);\n   }\n }\n\n @keyframes breeding-rhombus-spinner-animation-child-big {\n   50% {\n     transform: scale(0.5);\n   }\n }\n"
  },
  {
    "path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { BreedingRhombusSpinnerComponent } from './breeding-rhombus-spinner.component';\n\ndescribe('BreedingRhombusSpinnerComponent', () => {\n  let component: BreedingRhombusSpinnerComponent;\n  let fixture: ComponentFixture<BreedingRhombusSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ BreedingRhombusSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(BreedingRhombusSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.ts",
    "content": "import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n  selector: 'app-breeding-rhombus-spinner',\n  template: `\n      <div class=\"breeding-rhombus-spinner\" [ngStyle]=\"spinnerStyle\">\n        <div class=\"rhombus\" *ngFor=\"let rs of rhombusesStyles; let i = index;\" [ngStyle]=\"rs\" [ngClass]=\"childClassString(i)\"></div>\n        <div class=\"rhombus big\" [ngStyle]=\"bigRhombusStyle\"></div>\n      </div>\n    `,\n  styleUrls: ['./breeding-rhombus-spinner.component.css']\n})\nexport class BreedingRhombusSpinnerComponent implements OnInit {\n\n  constructor() { }\n  @Input() size = 150;\n  @Input() animationDuration = 2000;\n  @Input() color = '#fff';\n\n  animationBaseName = 'breeding-rhombus-spinner-animation-child';\n  rhombusesNum = 8;\n\n  get spinnerStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get rhombusStyle() {\n    return {\n      height: `${this.size / 7.5}px`,\n      width: `${this.size / 7.5}px`,\n      animationDuration: `${this.animationDuration}`,\n      top: `${this.size / 2.3077}px`,\n      left: `${this.size / 23077}px`,\n      backgroundColor: this.color\n    };\n  }\n\n  get rhombusesStyles() {\n    const rhombusesStyles = [];\n    const delayModifier = this.animationDuration * 0.05;\n\n    for (let i = 1; i <= this.rhombusesNum; i++) {\n      rhombusesStyles.push({\n        ...this.rhombusStyle,\n        animationDelay: `${delayModifier * (i + 1)}ms`\n      });\n    }\n\n    return rhombusesStyles;\n  }\n\n  get bigRhombusStyle() {\n    return {\n      height: `${this.size / 3}px`,\n      width: `${this.size / 3}px`,\n      animationDuration: `${this.animationDuration}`,\n      top: `${this.size / 3}px`,\n      left: `${this.size / 3}px`,\n      backgroundColor: this.color\n    };\n  }\n\n  childClassString(index) {\n    return `child-${index + 1}`;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {BreedingRhombusSpinnerComponent} from './breeding-rhombus-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [BreedingRhombusSpinnerComponent],\n  declarations: [BreedingRhombusSpinnerComponent],\n  providers: [],\n})\nexport class BreedingRhombusSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.css",
    "content": ".circles-to-rhombuses-spinner, .circles-to-rhombuses-spinner * {\n  box-sizing: border-box;\n}\n\n.circles-to-rhombuses-spinner {\n  height: 15px;\n  width: calc( (15px + 15px * 1.125) * 3);\n  display: flex;\n  align-items: center;\n  justify-content: center\n}\n\n.circles-to-rhombuses-spinner .circle {\n  height: 15px;\n  width: 15px;\n  margin-left: calc(15px * 1.125);\n  transform: rotate(45deg);\n  border-radius: 10%;\n  border: 3px solid #ff1d5e;\n  overflow: hidden;\n  background: transparent;\n\n  animation: circles-to-rhombuses-animation 1200ms linear infinite;\n}\n\n.circles-to-rhombuses-spinner .circle:nth-child(1) {\n  animation-delay: calc(150ms * 1);\n  margin-left: 0\n}\n\n.circles-to-rhombuses-spinner .circle:nth-child(2) {\n  animation-delay: calc(150ms * 2);\n}\n\n.circles-to-rhombuses-spinner .circle:nth-child(3) {\n  animation-delay: calc(150ms * 3);\n}\n\n@keyframes circles-to-rhombuses-animation {\n  0% {\n    border-radius: 10%;\n  }\n\n  17.5% {\n    border-radius: 10%;\n  }\n\n  50% {\n    border-radius: 100%;\n  }\n\n\n  93.5% {\n    border-radius: 10%;\n  }\n\n  100% {\n    border-radius: 10%;\n  }\n}\n\n@keyframes circles-to-rhombuses-background-animation {\n  50% {\n    opacity: 0.4;\n  }\n}\n"
  },
  {
    "path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { CirclesToRhumbusesSpinnerComponent } from './circles-to-rhumbuses-spinner.component';\n\ndescribe('CirclesToRhumbusesSpinnerComponent', () => {\n  let component: CirclesToRhumbusesSpinnerComponent;\n  let fixture: ComponentFixture<CirclesToRhumbusesSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ CirclesToRhumbusesSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(CirclesToRhumbusesSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-circles-to-rhumbuses-spinner',\n  template: `\n    <div class=\"circles-to-rhombuses-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"circle\" *ngFor=\"let cs of circlesStyles; let i = index;\" [ngStyle]=\"cs\"></div>\n    </div>\n  `,\n  styleUrls: ['./circles-to-rhumbuses-spinner.component.css']\n})\nexport class CirclesToRhumbusesSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() circleSize = 15;\n  @Input() circlesNum = 3;\n  @Input() animationDuration = 1200;\n  @Input() color = '#fff';\n\n  get circleMarginLeft() {\n    return this.circleSize * 1.125;\n  }\n\n  get spinnerStyle() {\n    return {\n      height: `${this.circleSize}px`,\n      width: `${(this.circleSize + this.circleMarginLeft) * this.circlesNum}px`\n    };\n  }\n\n  get circleStyle() {\n    return {\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`,\n      height: `${this.circleSize}px`,\n      width: `${this.circleSize}px`,\n      marginLeft: `${this.circleMarginLeft}px`\n    };\n  }\n\n  get circlesStyles() {\n    const circlesStyles = [];\n    const delay = 150;\n\n    for (let i = 1; i <= this.circlesNum; i++) {\n      const style = {\n        ...this.circleStyle,\n        animationDelay: `${i * delay}ms`\n      };\n      circlesStyles.push(style);\n    }\n\n    return circlesStyles;\n  }\n\n  ngOnInit() {\n\n  }\n}\n"
  },
  {
    "path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {CirclesToRhumbusesSpinnerComponent} from './circles-to-rhumbuses-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [CirclesToRhumbusesSpinnerComponent],\n  declarations: [CirclesToRhumbusesSpinnerComponent],\n  providers: [],\n})\nexport class CirclesToRhumbusesSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/fingerprint-spinner/fingerprint-spinner.component.css",
    "content": ".fingerprint-spinner, .fingerprint-spinner * {\n  box-sizing: border-box;\n}\n\n.fingerprint-spinner {\n  height: 64px;\n  width: 64px;\n  padding: 2px;\n  overflow: hidden;\n  position: relative;\n}\n\n.fingerprint-spinner .spinner-ring {\n  position: absolute;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  border-top-color: #ff1d5e;\n  animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.680, -0.750, 0.265, 1.750) infinite forwards;\n  margin: auto;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: 0;\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(1) {\n  height: calc(60px / 9 + 0 * 60px / 9);\n  width: calc(60px / 9 + 0 * 60px / 9);\n  animation-delay: calc(50ms * 1);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(2) {\n  height: calc(60px / 9 + 1 * 60px / 9);\n  width: calc(60px / 9 + 1 * 60px / 9);\n  animation-delay: calc(50ms * 2);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(3) {\n  height: calc(60px / 9 + 2 * 60px / 9);\n  width: calc(60px / 9 + 2 * 60px / 9);\n  animation-delay: calc(50ms * 3);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(4) {\n  height: calc(60px / 9 + 3 * 60px / 9);\n  width: calc(60px / 9 + 3 * 60px / 9);\n  animation-delay: calc(50ms * 4);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(5) {\n  height: calc(60px / 9 + 4 * 60px / 9);\n  width: calc(60px / 9 + 4 * 60px / 9);\n  animation-delay: calc(50ms * 5);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(6) {\n  height: calc(60px / 9 + 5 * 60px / 9);\n  width: calc(60px / 9 + 5 * 60px / 9);\n  animation-delay: calc(50ms * 6);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(7) {\n  height: calc(60px / 9 + 6 * 60px / 9);\n  width: calc(60px / 9 + 6 * 60px / 9);\n  animation-delay: calc(50ms * 7);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(8) {\n  height: calc(60px / 9 + 7 * 60px / 9);\n  width: calc(60px / 9 + 7 * 60px / 9);\n  animation-delay: calc(50ms * 8);\n}\n\n.fingerprint-spinner .spinner-ring:nth-child(9) {\n  height: calc(60px / 9 + 8 * 60px / 9);\n  width: calc(60px / 9 + 8 * 60px / 9);\n  animation-delay: calc(50ms * 9);\n}\n\n@keyframes fingerprint-spinner-animation {\n  100% {\n    transform: rotate( 360deg );\n  }\n}\n"
  },
  {
    "path": "src/app/fingerprint-spinner/fingerprint-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FingerprintSpinnerComponent } from './fingerprint-spinner.component';\n\ndescribe('FingerprintSpinnerComponent', () => {\n  let component: FingerprintSpinnerComponent;\n  let fixture: ComponentFixture<FingerprintSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ FingerprintSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(FingerprintSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/fingerprint-spinner/fingerprint-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-fingerprint-spinner',\n  template: `\n    <div class=\"fingerprint-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"spinner-ring\" *ngFor=\"let rs of ringsStyles\" [ngStyle]=\"rs\"></div>\n    </div>\n\n  `,\n  styleUrls: ['./fingerprint-spinner.component.css']\n})\nexport class FingerprintSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 60;\n  @Input() animationDuration = 1500;\n  @Input() color = '#fff';\n\n  ringsNum = 9;\n  containerPadding = 2;\n\n  get outerRingSize(): number {\n    return this.size - this.containerPadding * 2;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      padding: `${this.containerPadding}px`\n    };\n  }\n\n  get ringStyle(): object {\n    return {\n      borderTopColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get ringsStyles(): object {\n    const ringsStyles = [];\n    const ringBase = this.outerRingSize / (this.ringsNum);\n    const ringInc = ringBase;\n\n    for (let i = 1; i <= this.ringsNum; i++) {\n      ringsStyles.push({\n        ...this.ringStyle,\n        animationDelay: `${i * 50}ms`,\n        height: `${ringBase + (i + 1) * ringInc}px`,\n        width: `${ringBase + (i + 1) * ringInc}px`,\n      });\n    }\n\n    return ringsStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/fingerprint-spinner/fingerprint-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {FingerprintSpinnerComponent} from './fingerprint-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [FingerprintSpinnerComponent],\n  declarations: [FingerprintSpinnerComponent],\n  providers: [],\n})\nexport class FingerprintSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/flower-spinner/flower-spinner.component.css",
    "content": ".flower-spinner, .flower-spinner * {\n  box-sizing: border-box;\n}\n\n.flower-spinner {\n  height: 70px;\n  width: 70px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n\n.flower-spinner .dots-container {\n  height: calc(70px / 7);\n  width: calc(70px / 7);\n}\n\n.flower-spinner .smaller-dot {\n  background: #ff1d5e;\n  height: 100%;\n  width: 100%;\n  border-radius: 50%;\n  animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both;\n}\n\n.flower-spinner .bigger-dot {\n  background: #ff1d5e;\n  height: 100%;\n  width: 100%;\n  padding: 10%;\n  border-radius: 50%;\n  animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both;\n}\n\n@keyframes flower-spinner-bigger-dot-animation {\n  0%, 100% {\n    box-shadow: rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0;\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  25%, 75% {\n    box-shadow: rgb(255, 29, 94) 26px 0 0,\n    rgb(255, 29, 94) -26px 0 0,\n    rgb(255, 29, 94) 0 26px 0,\n    rgb(255, 29, 94) 0 -26px 0,\n    rgb(255, 29, 94) 19px -19px 0,\n    rgb(255, 29, 94) 19px 19px 0,\n    rgb(255, 29, 94) -19px -19px 0,\n    rgb(255, 29, 94) -19px 19px 0;\n  }\n  100% {\n    transform: rotate(360deg);\n    box-shadow: rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0;\n  }\n}\n\n@keyframes flower-spinner-smaller-dot-animation {\n  0%, 100% {\n    box-shadow: rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0;\n  }\n  25%, 75% {\n    box-shadow: rgb(255, 29, 94) 14px 0 0,\n    rgb(255, 29, 94) -14px 0 0,\n    rgb(255, 29, 94) 0 14px 0,\n    rgb(255, 29, 94) 0 -14px 0,\n    rgb(255, 29, 94) 10px -10px 0,\n    rgb(255, 29, 94) 10px 10px 0,\n    rgb(255, 29, 94) -10px -10px 0,\n    rgb(255, 29, 94) -10px 10px 0;\n  }\n  100% {\n    box-shadow: rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0,\n    rgb(255, 29, 94) 0 0 0;\n  }\n}\n"
  },
  {
    "path": "src/app/flower-spinner/flower-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FlowerSpinnerComponent } from './flower-spinner.component';\n\ndescribe('FlowerSpinnerComponent', () => {\n  let component: FlowerSpinnerComponent;\n  let fixture: ComponentFixture<FlowerSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ FlowerSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(FlowerSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/flower-spinner/flower-spinner.component.ts",
    "content": "import { Component, Input, OnChanges, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-flower-spinner',\n  template: `\n    <div class=\"flower-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"dots-container\" [ngStyle]=\"dotsContainerStyle\">\n        <div class=\"bigger-dot\" [ngStyle]=\"biggerDotStyle\">\n          <div class=\"smaller-dot\" [ngStyle]=\"smallerDotStyle\"></div>\n        </div>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./flower-spinner.component.css']\n})\nexport class FlowerSpinnerComponent implements OnInit, OnChanges {\n\n  constructor() {\n  }\n\n  @Input() size = 70;\n  @Input() animationDuration = 2500;\n  @Input() color = '#fff';\n\n  smallerDotAnimationBaseName = 'flower-spinner-smaller-dot-animation';\n  biggerDotAnimationBaseName = 'flower-spinner-bigger-dot-animation';\n  currentSmallerDotAnimationBaseName = '';\n  currentBiggerDotAnimationBaseName = '';\n\n  get dotSize(): number {\n    return this.size / 7;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n    };\n  }\n\n  get dotsContainerStyle(): object {\n    return {\n      width: `${this.color}px`,\n      height: `${this.color}px`,\n    };\n  }\n\n  get smallerDotStyle(): object {\n    return {\n      background: this.color,\n      animationDuration: `${this.animationDuration}ms`,\n      animationName: this.currentSmallerDotAnimationBaseName\n    };\n  }\n\n  get biggerDotStyle(): object {\n    return {\n      background: this.color,\n      animationDuration: `${this.animationDuration}ms`,\n      animationName: this.currentBiggerDotAnimationBaseName\n    };\n  }\n\n  ngOnInit() {\n  }\n\n  ngOnChanges() {\n\n  }\n\n}\n"
  },
  {
    "path": "src/app/flower-spinner/flower-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {FlowerSpinnerComponent} from './flower-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [FlowerSpinnerComponent],\n  declarations: [FlowerSpinnerComponent],\n  providers: [],\n})\nexport class FlowerSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.css",
    "content": "\n.fulfilling-bouncing-circle-spinner, .fulfilling-bouncing-circle-spinner * {\n  box-sizing: border-box;\n}\n.fulfilling-bouncing-circle-spinner {\n  height: 60px;\n  width: 60px;\n  position: relative;\n  animation: fulfilling-bouncing-circle-spinner-animation infinite 4000ms ease;\n}\n.fulfilling-bouncing-circle-spinner .orbit {\n  height: 60px;\n  width: 60px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 50%;\n  border: calc(60px * 0.03) solid #ff1d5e;\n  animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 4000ms ease;\n}\n.fulfilling-bouncing-circle-spinner .circle {\n  height: 60px;\n  width: 60px;\n  color: #ff1d5e;\n  display: block;\n  border-radius: 50%;\n  position: relative;\n  border: calc(60px * 0.1) solid #ff1d5e;\n  animation: fulfilling-bouncing-circle-spinner-circle-animation infinite 4000ms ease;\n  transform: rotate(0deg) scale(1);\n}\n@keyframes fulfilling-bouncing-circle-spinner-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes fulfilling-bouncing-circle-spinner-orbit-animation {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1);\n  }\n  62.5% {\n    transform: scale(0.8);\n  }\n  75% {\n    transform: scale(1);\n  }\n  87.5% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes fulfilling-bouncing-circle-spinner-circle-animation {\n  0% {\n    transform: scale(1);\n    border-color: transparent;\n    border-top-color: inherit;\n  }\n  16.7% {\n    border-color: transparent;\n    border-top-color: initial;\n    border-right-color: initial;\n  }\n  33.4% {\n    border-color: transparent;\n    border-top-color: inherit;\n    border-right-color: inherit;\n    border-bottom-color: inherit;\n  }\n  50% {\n    border-color: inherit;\n    transform: scale(1);\n  }\n  62.5% {\n    border-color: inherit;\n    transform: scale(1.4);\n  }\n  75% {\n    border-color: inherit;\n    transform: scale(1);\n    opacity: 1;\n  }\n  87.5% {\n    border-color: inherit;\n    transform: scale(1.4);\n  }\n  100% {\n    border-color: transparent;\n    border-top-color: inherit;\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FulfillingBouncingCircleSpinnerComponent } from './fulfilling-bouncing-circle-spinner.component';\n\ndescribe('FulfillingBouncingCircleSpinnerComponent', () => {\n  let component: FulfillingBouncingCircleSpinnerComponent;\n  let fixture: ComponentFixture<FulfillingBouncingCircleSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ FulfillingBouncingCircleSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(FulfillingBouncingCircleSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-fulfilling-bouncing-circle-spinner',\n  template: `\n    <div class=\"fulfilling-bouncing-circle-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"circle\" [ngStyle]=\"circleStyle\"></div>\n      <div class=\"orbit\" [ngStyle]=\"orbitStyle\"></div>\n    </div>\n  `,\n  styleUrls: ['./fulfilling-bouncing-circle-spinner.component.css']\n})\nexport class FulfillingBouncingCircleSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 60;\n  @Input() animationDuration = 4000;\n  @Input() color = '#fff';\n\n  get spinnerStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get orbitStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      borderColor: this.color,\n      borderWidth: `${this.size * 0.03}px`,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get circleStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      borderColor: this.color,\n      color: this.color,\n      borderWidth: `${this.size * 0.1}px`,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {FulfillingBouncingCircleSpinnerComponent} from './fulfilling-bouncing-circle-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [FulfillingBouncingCircleSpinnerComponent],\n  declarations: [FulfillingBouncingCircleSpinnerComponent],\n  providers: [],\n})\nexport class FulfillingBouncingCircleSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.css",
    "content": ".fulfilling-square-spinner, .fulfilling-square-spinner * {\n  box-sizing: border-box;\n}\n.fulfilling-square-spinner {\n  height: 50px;\n  width: 50px;\n  position: relative;\n  border: 4px solid #ff1d5e;\n  animation: fulfilling-square-spinner-animation 4s infinite ease;\n}\n.fulfilling-square-spinner .spinner-inner {\n  vertical-align: top;\n  display: inline-block;\n  background-color: #ff1d5e;\n  width: 100%;\n  opacity: 1;\n  animation: fulfilling-square-spinner-inner-animation 4s infinite ease-in;\n}\n@keyframes fulfilling-square-spinner-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(180deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  75% {\n    transform: rotate(360deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes fulfilling-square-spinner-inner-animation {\n  0% {\n    height: 0;\n  }\n  25% {\n    height: 0;\n  }\n  50% {\n    height: 100%;\n  }\n  75% {\n    height: 100%;\n  }\n  100% {\n    height: 0;\n  }\n}\n"
  },
  {
    "path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FulfillingSquareSpinnerComponent } from './fulfilling-square-spinner.component';\n\ndescribe('FulfillingSquareSpinnerComponent', () => {\n  let component: FulfillingSquareSpinnerComponent;\n  let fixture: ComponentFixture<FulfillingSquareSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ FulfillingSquareSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(FulfillingSquareSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-fulfilling-square-spinner',\n  template: `\n    <div class=\"fulfilling-square-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"spinner-inner\" [ngStyle]=\"spinnerInnerStyle\"></div>\n    </div>\n  `,\n  styleUrls: ['./fulfilling-square-spinner.component.css']\n})\nexport class FulfillingSquareSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 4000;\n  @Input() size = 50;\n  @Input() color = '#fff';\n\n  get spinnerStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      borderColor: this.color,\n    };\n  }\n\n  get spinnerInnerStyle() {\n    return {\n      backgroundColor: this.color\n    };\n  }\n\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {FulfillingSquareSpinnerComponent} from './fulfilling-square-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [FulfillingSquareSpinnerComponent],\n  declarations: [FulfillingSquareSpinnerComponent],\n  providers: [],\n})\nexport class FulfillingSquareSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/half-circle-spinner/half-circle-spinner.component.css",
    "content": ".half-circle-spinner, .half-circle-spinner * {\n  box-sizing: border-box;\n}\n.half-circle-spinner {\n  width: 60px;\n  height: 60px;\n  border-radius: 100%;\n  position: relative;\n}\n.half-circle-spinner .circle {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 100%;\n  border: calc(60px / 10) solid transparent;\n}\n.half-circle-spinner .circle.circle-1 {\n  border-top-color: #ff1d5e;\n  animation: half-circle-spinner-animation 1s infinite;\n}\n.half-circle-spinner .circle.circle-2 {\n  border-bottom-color: #ff1d5e;\n  animation: half-circle-spinner-animation 1s infinite alternate;\n}\n@keyframes half-circle-spinner-animation {\n  0% {\n    transform: rotate(0deg);\n  }\n  100%{\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "src/app/half-circle-spinner/half-circle-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HalfCircleSpinnerComponent } from './half-circle-spinner.component';\n\ndescribe('HalfCircleSpinnerComponent', () => {\n  let component: HalfCircleSpinnerComponent;\n  let fixture: ComponentFixture<HalfCircleSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ HalfCircleSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(HalfCircleSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/half-circle-spinner/half-circle-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-half-circle-spinner',\n  template: `\n    <div class=\"half-circle-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"circle circle-1\" [ngStyle]=\"circle1Style\"></div>\n      <div class=\"circle circle-2\" [ngStyle]=\"circle2Style\"></div>\n    </div>\n  `,\n  styleUrls: ['./half-circle-spinner.component.css']\n})\nexport class HalfCircleSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1000;\n  @Input() size = 60;\n  @Input() color = '#fff';\n\n  get spinnerStyle() {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n    };\n  }\n\n  get circleStyle() {\n    return {\n      borderWidth: `${this.size / 10}px`,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get circle1Style() {\n    return {\n      ...this.circleStyle,\n      borderTopColor: this.color\n    };\n  }\n\n  get circle2Style() {\n    return {\n      ...this.circleStyle,\n      borderBottomColor: this.color\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/half-circle-spinner/half-circle-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {HalfCircleSpinnerComponent} from './half-circle-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [HalfCircleSpinnerComponent],\n  declarations: [HalfCircleSpinnerComponent],\n  providers: [],\n})\nexport class HalfCircleSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.css",
    "content": "\n.hollow-dots-spinner, .hollow-dots-spinner * {\n  box-sizing: border-box;\n}\n.hollow-dots-spinner {\n  height: 15px;\n  width: calc(30px * 3);\n}\n.hollow-dots-spinner .dot {\n  width: 15px;\n  height: 15px;\n  margin: 0 calc(15px / 2);\n  border: calc(15px / 5) solid #ff1d5e;\n  border-radius: 50%;\n  float: left;\n  transform: scale(0);\n  animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;\n}\n.hollow-dots-spinner .dot:nth-child(1) {\n  animation-delay: calc(300ms * 1);\n}\n.hollow-dots-spinner .dot:nth-child(2) {\n  animation-delay: calc(300ms * 2);\n}\n.hollow-dots-spinner .dot:nth-child(3) {\n  animation-delay: calc(300ms * 3);\n}\n@keyframes hollow-dots-spinner-animation {\n  50% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HollowDotsSpinnerComponent } from './hollow-dots-spinner.component';\n\ndescribe('HollowDotsSpinnerComponent', () => {\n  let component: HollowDotsSpinnerComponent;\n  let fixture: ComponentFixture<HollowDotsSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ HollowDotsSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(HollowDotsSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-hollow-dots-spinner',\n  template: `\n    <div class=\"hollow-dots-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"dot\" *ngFor=\"let ds of dotsStyles\" [ngStyle]=\"ds\"></div>\n    </div>\n  `,\n  styleUrls: ['./hollow-dots-spinner.component.css']\n})\nexport class HollowDotsSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1000;\n  @Input() dotSize = 15;\n  @Input() dotsNum = 3;\n  @Input() color = '#fff';\n\n  get horizontalMargin(): number {\n    return this.dotSize / 2;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.dotSize}px`,\n      width: `${this.dotSize}px`,\n    };\n  }\n\n  get dotStyle(): object {\n    return {\n      width: `${this.dotSize}px`,\n      height: `${this.dotSize}px`,\n      margin: `0 ${this.horizontalMargin}px`,\n      borderWidth: `${this.dotSize / 5}px`,\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get dotsStyles(): object {\n    const dotsStyles = [];\n    const delayModifier = 0.3;\n    const basicDelay = 1000;\n\n    for (let i = 1; i <= this.dotsNum; i++) {\n      const style = {\n        ...this.dotStyle,\n        animationDelay: `${basicDelay * i * delayModifier}ms`\n      };\n\n      dotsStyles.push(style);\n    }\n\n    return dotsStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/hollow-dots-spinner/hollow-dots-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {HollowDotsSpinnerComponent} from './hollow-dots-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [HollowDotsSpinnerComponent],\n  declarations: [HollowDotsSpinnerComponent],\n  providers: [],\n})\nexport class HollowDotsSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.css",
    "content": ".intersecting-circles-spinner, .intersecting-circles-spinner * {\n  box-sizing: border-box;\n}\n.intersecting-circles-spinner {\n  height: 70px;\n  width: 70px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.intersecting-circles-spinner .spinnerBlock {\n  animation: intersecting-circles-spinners-animation 1200ms linear infinite;\n  transform-origin: center;\n  display: block;\n  height: 35px;\n  width: 35px;\n}\n.intersecting-circles-spinner .circle {\n  display: block;\n  border: 2px solid #ff1d5e;\n  border-radius: 50%;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.intersecting-circles-spinner .circle:nth-child(1) {\n  left: 0;\n  top: 0;\n}\n.intersecting-circles-spinner .circle:nth-child(2) {\n  left: calc(35px * -0.36);\n  top: calc(35px * 0.2);\n}\n.intersecting-circles-spinner .circle:nth-child(3) {\n  left: calc(35px * -0.36);\n  top: calc(35px * -0.2);\n}\n.intersecting-circles-spinner .circle:nth-child(4) {\n  left: 0;\n  top: calc(35px * -0.36);\n}\n.intersecting-circles-spinner .circle:nth-child(5) {\n  left: calc(35px * 0.36);\n  top: calc(35px * -0.2);\n}\n.intersecting-circles-spinner .circle:nth-child(6) {\n  left: calc(35px * 0.36);\n  top: calc(35px * 0.2);\n}\n.intersecting-circles-spinner .circle:nth-child(7) {\n  left: 0;\n  top: calc(35px * 0.36);\n}\n@keyframes intersecting-circles-spinners-animation {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n"
  },
  {
    "path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { IntersectingCirclesSpinnerComponent } from './intersecting-circles-spinner.component';\n\ndescribe('IntersectingCirclesSpinnerComponent', () => {\n  let component: IntersectingCirclesSpinnerComponent;\n  let fixture: ComponentFixture<IntersectingCirclesSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ IntersectingCirclesSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(IntersectingCirclesSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-intersecting-circles-spinner',\n  template: `\n    <div class=\"intersecting-circles-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"spinnerBlock\" [ngStyle]=\"spinnerBlockStyle\">\n        <span class=\"circle\" *ngFor=\"let cs of circleStyles\" [ngStyle]=\"cs\"></span>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./intersecting-circles-spinner.component.css']\n})\nexport class IntersectingCirclesSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1200;\n  @Input() size = 70;\n  @Input() color = '#fff';\n\n  get circleSize(): number {\n    return this.size / 2;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      width: `${this.size}px`,\n      height: `${this.size}px`\n    };\n  }\n\n  get spinnerBlockStyle(): object {\n    return {\n      animationDuration: `${this.animationDuration}ms`,\n      width: `${this.circleSize}px`,\n      height: `${this.circleSize}px`\n    };\n  }\n\n  get circleStyle(): object {\n    return {\n      borderColor: this.color\n    };\n  }\n\n  get circleStyles(): object {\n    const circlesPositions = [\n      {top: 0, left: 0},\n      {left: `${this.circleSize * -0.36}px`, top: `${this.circleSize * 0.2}px`},\n      {left: `${this.circleSize * -0.36}px`, top: `${this.circleSize * -0.2}px`},\n      {left: 0, top: `${this.circleSize * -0.36}px`},\n      {left: `${this.circleSize * 0.36}px`, top: `${this.circleSize * -0.2}px`},\n      {left: `${this.circleSize * 0.36}px`, top: `${this.circleSize * 0.2}px`},\n      {left: 0, top: `${this.circleSize * 0.36}px`}\n    ];\n\n    return circlesPositions.map((cp) => {\n      return {cp, ...this.circleStyle};\n    });\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {IntersectingCirclesSpinnerComponent} from './intersecting-circles-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [IntersectingCirclesSpinnerComponent],\n  declarations: [IntersectingCirclesSpinnerComponent],\n  providers: [],\n})\nexport class IntersectingCirclesSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.css",
    "content": ".looping-rhombuses-spinner, .looping-rhombuses-spinner * {\n  box-sizing: border-box;\n}\n.looping-rhombuses-spinner {\n  width: calc(15px * 4);\n  height: 15px;\n  position: relative;\n}\n.looping-rhombuses-spinner .rhombus {\n  height: 15px;\n  width: 15px;\n  background: #ff1d5e;\n  left: calc(15px * 4);\n  position: absolute;\n  margin: 0 auto;\n  border-radius: 2px;\n  transform: translateY(0) rotate(45deg) scale(0);\n  animation: looping-rhombuses-spinner-animation 2500ms linear infinite;\n}\n.looping-rhombuses-spinner .rhombus:nth-child(1) {\n  animation-delay: calc(2500ms * 1 / -1.5);\n}\n.looping-rhombuses-spinner .rhombus:nth-child(2) {\n  animation-delay: calc(2500ms * 2 / -1.5);\n}\n.looping-rhombuses-spinner .rhombus:nth-child(3) {\n  animation-delay: calc(2500ms * 3 / -1.5);\n}\n@keyframes looping-rhombuses-spinner-animation {\n  0% {\n    transform: translateX(0) rotate(45deg) scale(0);\n  }\n  50% {\n    transform: translateX(-233%) rotate(45deg) scale(1);\n  }\n  100% {\n    transform: translateX(-466%) rotate(45deg) scale(0);\n  }\n}\n"
  },
  {
    "path": "src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoopingRhombusesSpinnerComponent } from './looping-rhumbuses-spinner.component';\n\ndescribe('LoopingRhombusesSpinnerComponent', () => {\n  let component: LoopingRhombusesSpinnerComponent;\n  let fixture: ComponentFixture<LoopingRhombusesSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ LoopingRhombusesSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(LoopingRhombusesSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-looping-rhombuses-spinner',\n  template: `\n    <div class=\"looping-rhombuses-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"rhombus\"\n           *ngFor=\"let rs of rhombusesStyles\"\n           [ngStyle]=\"rs\">\n      </div>\n    </div>\n  `,\n  styleUrls: ['./looping-rhombuses-spinner.component.css']\n})\nexport class LoopingRhumbusesSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 2500;\n  @Input() rhombusSize = 15;\n  @Input() color = '#fff';\n\n  rhombusesNum = 3;\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.rhombusSize}px`,\n      width: `${this.rhombusSize * 4}px`\n    };\n  }\n\n  get rhombusStyle(): object {\n    return {\n      height: `${this.rhombusSize}px`,\n      width: `${this.rhombusSize}px`,\n      background: this.color,\n      animationDuration: `${this.animationDuration}ms`,\n      left: `${this.rhombusSize * 4}px`\n    };\n  }\n\n  get rhombusesStyles(): object {\n    const rhombusesStyles = [];\n    const delay = -this.animationDuration / 1.5;\n    for (let i = 1; i <= this.rhombusesNum; i++) {\n      const style = Object.assign({\n        animationDelay: `${i * delay}ms`\n      }, this.rhombusStyle);\n      rhombusesStyles.push(style);\n    }\n    return rhombusesStyles;\n  }\n\n  ngOnInit() {\n    \n  }\n\n}\n"
  },
  {
    "path": "src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {LoopingRhumbusesSpinnerComponent} from './looping-rhumbuses-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [LoopingRhumbusesSpinnerComponent],\n  declarations: [LoopingRhumbusesSpinnerComponent],\n  providers: [],\n})\nexport class LoopingRhumbusesSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/orbit-spinner/orbit-spinner.component.css",
    "content": ".orbit-spinner, .orbit-spinner * {\n  box-sizing: border-box;\n}\n.orbit-spinner {\n  height: 55px;\n  width: 55px;\n  border-radius: 50%;\n  perspective: 800px;\n}\n.orbit-spinner .orbit {\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n.orbit-spinner .orbit:nth-child(1) {\n  left: 0;\n  top: 0;\n  animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;\n  border-bottom: 3px solid #ff1d5e;\n}\n.orbit-spinner .orbit:nth-child(2) {\n  right: 0;\n  top: 0;\n  animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;\n  border-right: 3px solid #ff1d5e;\n}\n.orbit-spinner .orbit:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;\n  border-top: 3px solid #ff1d5e;\n}\n@keyframes orbit-spinner-orbit-one-animation {\n  0%{\n    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);\n  }\n  100% {\n    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);\n  }\n}\n@keyframes orbit-spinner-orbit-two-animation {\n  0% {\n    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);\n  }\n  100% {\n    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);\n  }\n}\n@keyframes orbit-spinner-orbit-three-animation {\n  0% {\n    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);\n  }\n  100% {\n    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);\n  }\n}\n"
  },
  {
    "path": "src/app/orbit-spinner/orbit-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OrbitSpinnerComponent } from './orbit-spinner.component';\n\ndescribe('OrbitSpinnerComponent', () => {\n  let component: OrbitSpinnerComponent;\n  let fixture: ComponentFixture<OrbitSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ OrbitSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(OrbitSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/orbit-spinner/orbit-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-orbit-spinner',\n  template: `\n    <div class=\"orbit-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"orbit one\" [ngStyle]=\"orbitStyle\"></div>\n      <div class=\"orbit two\" [ngStyle]=\"orbitStyle\"></div>\n      <div class=\"orbit three\" [ngStyle]=\"orbitStyle\"></div>\n    </div>\n  `,\n  styleUrls: ['./orbit-spinner.component.css']\n})\nexport class OrbitSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1000;\n  @Input() size = 50;\n  @Input() color = '#fff';\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get orbitStyle(): object {\n    return {\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/orbit-spinner/orbit-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {OrbitSpinnerComponent} from './orbit-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [OrbitSpinnerComponent],\n  declarations: [OrbitSpinnerComponent],\n  providers: [],\n})\nexport class OrbitSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/pixel-spinner/pixel-spinner.component.css",
    "content": ".pixel-spinner, .pixel-spinner * {\n  box-sizing: border-box;\n}\n\n.pixel-spinner {\n  height: 70px;\n  width: 70px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n\n.pixel-spinner .pixel-spinner-inner {\n  width: calc(70px / 7);\n  height: calc(70px / 7);\n  background-color: #ff1d5e;\n  color: #ff1d5e;\n  box-shadow: 15px 15px 0 0,\n  -15px -15px 0 0,\n  15px -15px 0 0,\n  -15px 15px 0 0,\n  0 15px 0 0,\n  15px 0 0 0,\n  -15px 0 0 0,\n  0 -15px 0 0;\n  animation: pixel-spinner-animation 2000ms linear infinite;\n}\n\n@keyframes pixel-spinner-animation {\n  50% {\n    box-shadow: 20px 20px 0 0,\n    -20px -20px 0 0,\n    20px -20px 0 0,\n    -20px 20px 0 0,\n    0 10px 0 0,\n    10px 0 0 0,\n    -10px 0 0 0,\n    0 -10px 0 0;\n  }\n  75% {\n    box-shadow: 20px 20px 0 0,\n    -20px -20px 0 0,\n    20px -20px 0 0,\n    -20px 20px 0 0,\n    0 10px 0 0,\n    10px 0 0 0,\n    -10px 0 0 0,\n    0 -10px 0 0;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "src/app/pixel-spinner/pixel-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PixelSpinnerComponent } from './pixel-spinner.component';\n\ndescribe('PixelSpinnerComponent', () => {\n  let component: PixelSpinnerComponent;\n  let fixture: ComponentFixture<PixelSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ PixelSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(PixelSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/pixel-spinner/pixel-spinner.component.ts",
    "content": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-pixel-spinner',\n  template: `\n    <div class=\"pixel-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"pixel-spinner-inner\" [ngStyle]=\"spinnerInnerStyle\"></div>\n    </div>\n  `,\n  styleUrls: ['./pixel-spinner.component.css']\n})\nexport class PixelSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1000;\n  @Input() size = 50;\n  @Input() color = '#fff';\n\n  animationBaseName = 'pixel-spinner-animation';\n  currentAnimationName = '';\n\n  get pixelSize(): number {\n    return this.size / 7;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      width: `${this.size}px`,\n      height: `${this.size}px`\n    };\n  }\n\n  get spinnerInnerStyle(): object {\n    return {\n      animationDuration: `${this.animationDuration}ms`,\n      animationName: this.currentAnimationName,\n      width: `${this.pixelSize}px`,\n      height: `${this.pixelSize}px`,\n      backgroundColor: this.color,\n      color: this.color,\n      boxShadow: `\n                        ${this.pixelSize * 1.5}px ${this.pixelSize * 1.5}px 0 0,\n                        ${this.pixelSize * -1.5}px ${this.pixelSize * -1.5}px 0 0,\n                        ${this.pixelSize * 1.5}px ${this.pixelSize * -1.5}px 0 0,\n                        ${this.pixelSize * -1.5}px ${this.pixelSize * 1.5}px 0 0,\n                        0 ${this.pixelSize * 1.5}px 0 0,\n                        ${this.pixelSize * 1.5}px 0 0 0,\n                        ${this.pixelSize * -1.5}px 0 0 0,\n                        0 ${this.pixelSize * -1.5}px 0 0\n                      `\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/pixel-spinner/pixel-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {PixelSpinnerComponent} from './pixel-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [PixelSpinnerComponent],\n  declarations: [PixelSpinnerComponent],\n  providers: [],\n})\nexport class PixelSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/radar-spinner/radar-spinner.component.css",
    "content": ".radar-spinner, .radar-spinner * {\n  box-sizing: border-box;\n}\n.radar-spinner {\n  height: 60px;\n  width: 60px;\n  position: relative;\n}\n.radar-spinner .circle {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  animation: radar-spinner-animation 2s infinite;\n}\n.radar-spinner .circle:nth-child(1) {\n  padding: calc(60px * 5 * 2 * 0 / 110);\n  animation-delay: 300ms;\n}\n.radar-spinner .circle:nth-child(2) {\n  padding: calc(60px * 5 * 2 * 1 / 110);\n  animation-delay: 300ms;\n}\n.radar-spinner .circle:nth-child(3) {\n  padding: calc(60px * 5 * 2 * 2 / 110);\n  animation-delay: 300ms;\n}\n.radar-spinner .circle:nth-child(4) {\n  padding: calc(60px * 5 * 2 * 3 / 110);\n  animation-delay: 0ms;\n}\n.radar-spinner .circle-inner, .radar-spinner .circle-inner-container {\n  height: 100%;\n  width: 100%;\n  border-radius: 50%;\n  border: calc(60px * 5 / 110) solid transparent;\n}\n.radar-spinner .circle-inner {\n  border-left-color: #ff1d5e;\n  border-right-color: #ff1d5e;\n}\n@keyframes radar-spinner-animation {\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n"
  },
  {
    "path": "src/app/radar-spinner/radar-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { RadarSpinnerComponent } from './radar-spinner.component';\n\ndescribe('RadarSpinnerComponent', () => {\n  let component: RadarSpinnerComponent;\n  let fixture: ComponentFixture<RadarSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ RadarSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(RadarSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/radar-spinner/radar-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-radar-spinner',\n  template: `\n    <div class=\"radar-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"circle\" *ngFor=\"let cs of circlesStyles\" [ngStyle]=\"cs\">\n        <div class=\"circle-inner-container\" [ngStyle]=\"circleInnerContainerStyle\">\n          <div class=\"circle-inner\" [ngStyle]=\"circleInnerStyle\"></div>\n        </div>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./radar-spinner.component.css']\n})\nexport class RadarSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 110;\n  @Input() animationDuration = 2000;\n  @Input() color = '#fff';\n\n  private circlesNum = 4;\n\n  get borderWidth(): number {\n    return this.size * 5 / 110;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get circleStyle(): object {\n    return {\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get circleInnerContainerStyle(): object {\n    return {\n      borderWidth: `${this.borderWidth}px`\n    };\n  }\n\n  get circleInnerStyle(): object {\n    return {\n      borderLeftColor: this.color,\n      borderRightColor: this.color,\n      borderWidth: `${this.borderWidth}px`\n    };\n  }\n\n  get circlesStyles(): object {\n    const circlesStyles = [];\n    const delay = this.animationDuration * 0.15;\n    for (let i = 0; i < this.circlesNum; i++) {\n      circlesStyles.push(Object.assign({\n        padding: `${this.borderWidth * 2 * i}px`,\n        animationDelay: `${i === this.circlesNum - 1 ? 0 : delay}ms`\n      }, this.circleStyle));\n    }\n    return circlesStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/radar-spinner/radar-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {RadarSpinnerComponent} from './radar-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [RadarSpinnerComponent],\n  declarations: [RadarSpinnerComponent],\n  providers: [],\n})\nexport class RadarSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.css",
    "content": ".scaling-squares-spinner, .scaling-squares-spinner * {\n  box-sizing: border-box;\n}\n.scaling-squares-spinner {\n  height: 65px;\n  width: 65px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  animation: scaling-squares-animation 1250ms;\n  animation-iteration-count: infinite;\n  transform: rotate(0deg);\n}\n.scaling-squares-spinner .square {\n  height: calc(65px * 0.25 / 1.3);\n  width: calc(65px * 0.25 / 1.3);\n  margin-right: auto;\n  margin-left: auto;\n  border: calc(65px * 0.04 / 1.3) solid #ff1d5e;\n  position: absolute;\n  animation-duration: 1250ms;\n  animation-iteration-count: infinite;\n}\n.scaling-squares-spinner .square:nth-child(1) {\n  animation-name: scaling-squares-spinner-animation-child-1;\n}\n.scaling-squares-spinner .square:nth-child(2) {\n  animation-name: scaling-squares-spinner-animation-child-2;\n}\n.scaling-squares-spinner .square:nth-child(3) {\n  animation-name: scaling-squares-spinner-animation-child-3;\n}\n.scaling-squares-spinner .square:nth-child(4) {\n  animation-name: scaling-squares-spinner-animation-child-4;\n}\n@keyframes scaling-squares-animation {\n  50% {\n    transform: rotate(90deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n}\n@keyframes scaling-squares-spinner-animation-child-1 {\n  50% {\n    transform: translate(150%,150%) scale(2,2);\n  }\n}\n@keyframes scaling-squares-spinner-animation-child-2 {\n  50% {\n    transform: translate(-150%,150%) scale(2,2);\n  }\n}\n@keyframes scaling-squares-spinner-animation-child-3 {\n  50% {\n    transform: translate(-150%,-150%) scale(2,2);\n  }\n}\n@keyframes scaling-squares-spinner-animation-child-4 {\n  50% {\n    transform: translate(150%,-150%) scale(2,2);\n  }\n}\n"
  },
  {
    "path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ScalingSquaresSpinnerComponent } from './scaling-squares-spinner.component';\n\ndescribe('ScalingSquaresSpinnerComponent', () => {\n  let component: ScalingSquaresSpinnerComponent;\n  let fixture: ComponentFixture<ScalingSquaresSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ ScalingSquaresSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(ScalingSquaresSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-scaling-squares-spinner',\n  template: `\n    <div class=\"scaling-squares-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"square\"\n           *ngFor=\"let ss of squaresStyles; let i = index;\"\n           [ngClass]=\"childClass(i)\"\n           [ngStyle]=\"ss\">\n      </div>\n    </div>\n  `,\n  styleUrls: ['./scaling-squares-spinner.component.css']\n})\nexport class ScalingSquaresSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 65;\n  @Input() color = '#fff';\n  @Input() animationDuration = 1250;\n\n  squaresNum = 4;\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get squareStyle(): object {\n    return {\n      height: `${this.size * 0.25 / 1.3}px`,\n      width: `${this.size * 0.25 / 1.3}px`,\n      animationDuration: `${this.animationDuration}ms`,\n      borderWidth: `${this.size * 0.04 / 1.3}px`,\n      borderColor: this.color\n    };\n  }\n\n  get squaresStyles(): object {\n    const squaresStyles = [];\n    for (let i = 1; i <= this.squaresNum; i++) {\n      squaresStyles.push({...this.squareStyle});\n    }\n    return squaresStyles;\n  }\n\n  childClass(i) {\n    return `square-${i + 1}`;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/scaling-squares-spinner/scaling-squares-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {ScalingSquaresSpinnerComponent} from './scaling-squares-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [ScalingSquaresSpinnerComponent],\n  declarations: [ScalingSquaresSpinnerComponent],\n  providers: [],\n})\nexport class ScalingSquaresSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/self-building-square-spinner/self-building-square-spinner.component.css",
    "content": ".self-building-square-spinner, .self-building-square-spinner * {\n  box-sizing: border-box;\n}\n.self-building-square-spinner {\n  height: 40px;\n  width: 40px;\n  top: calc( -10px * 2 / 3);\n}\n.self-building-square-spinner .square {\n  height: 10px;\n  width: 10px;\n  top: calc( -10px * 2 / 3);\n  margin-right: calc(10px / 3);\n  margin-top: calc(10px / 3);\n  background: #ff1d5e;\n  float: left;\n  position:relative;\n  opacity: 0;\n  animation: self-building-square-spinner 6s infinite;\n}\n.self-building-square-spinner .square:nth-child(1) {\n  animation-delay: calc(300ms * 6);\n}\n.self-building-square-spinner .square:nth-child(2) {\n  animation-delay: calc(300ms * 7);\n}\n.self-building-square-spinner .square:nth-child(3) {\n  animation-delay: calc(300ms * 8);\n}\n.self-building-square-spinner .square:nth-child(4) {\n  animation-delay: calc(300ms * 3);\n}\n.self-building-square-spinner .square:nth-child(5) {\n  animation-delay: calc(300ms * 4);\n}\n.self-building-square-spinner .square:nth-child(6) {\n  animation-delay: calc(300ms * 5);\n}\n.self-building-square-spinner .square:nth-child(7) {\n  animation-delay: calc(300ms * 0);\n}\n.self-building-square-spinner .square:nth-child(8) {\n  animation-delay: calc(300ms * 1);\n}\n.self-building-square-spinner .square:nth-child(9) {\n  animation-delay: calc(300ms * 2);\n}\n.self-building-square-spinner .clear{\n  clear: both;\n}\n@keyframes self-building-square-spinner {\n  0% {\n    opacity: 0;\n  }\n  5% {\n    opacity: 1;\n    top: 0;\n  }\n  50.9% {\n    opacity: 1;\n    top: 0;\n  }\n  55.9% {\n    opacity: 0;\n    top: inherit;\n  }\n}\n"
  },
  {
    "path": "src/app/self-building-square-spinner/self-building-square-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SelfBuildingSquareSpinnerComponent } from './self-building-square-spinner.component';\n\ndescribe('SelfBuildingSquareSpinnerComponent', () => {\n  let component: SelfBuildingSquareSpinnerComponent;\n  let fixture: ComponentFixture<SelfBuildingSquareSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ SelfBuildingSquareSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(SelfBuildingSquareSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/self-building-square-spinner/self-building-square-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-self-building-square-spinner',\n  template: `\n    <div class=\"self-building-square-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"square\"\n           *ngFor=\"let ss of squaresStyles; let i = index;\"\n           [ngStyle]=\"ss\"\n           [ngClass]=\"{'clear': i && i % 3 === 0}\"\n      >\n      </div>\n    </div>\n  `,\n  styleUrls: ['./self-building-square-spinner.component.css']\n})\nexport class SelfBuildingSquareSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 6000;\n  @Input() size = 40;\n  @Input() color = '#fff';\n\n  squaresNum = 9;\n\n  get squareSize(): number {\n    return this.size / 4;\n  }\n\n  get initialTopPosition(): number {\n    return -this.squareSize * 2 / 3;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      top: `${-this.initialTopPosition}px`,\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get squareStyle(): object {\n    return {\n      height: `${this.squareSize}px`,\n      width: `${this.squareSize}px`,\n      top: `${this.initialTopPosition}px`,\n      marginRight: `${this.squareSize / 3}px`,\n      marginTop: `${this.squareSize / 3}px`,\n      animationDuration: `${this.animationDuration}ms`,\n      background: this.color\n    };\n  }\n\n  get squaresStyles(): object {\n    const squaresStyles = [];\n    const delaysMultipliers = [6, 7, 8, 3, 4, 5, 0, 1, 2];\n    const delayModifier = this.animationDuration * 0.05;\n    for (let i = 0; i < this.squaresNum; i++) {\n      squaresStyles.push({\n        animationDelay: `${delayModifier * delaysMultipliers[i]}ms`,\n        ...this.squareStyle\n      });\n    }\n    return squaresStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/self-building-square-spinner/self-building-square-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {SelfBuildingSquareSpinnerComponent} from './self-building-square-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [SelfBuildingSquareSpinnerComponent],\n  declarations: [SelfBuildingSquareSpinnerComponent],\n  providers: [],\n})\nexport class SelfBuildingSquareSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/semipolar-spinner/semipolar-spinner.component.css",
    "content": ".semipolar-spinner, .semipolar-spinner * {\n  box-sizing: border-box;\n}\n.semipolar-spinner {\n  height: 65px;\n  width: 65px;\n  position: relative;\n}\n.semipolar-spinner .ring {\n  border-radius: 50%;\n  position: absolute;\n  border: calc(65px * 0.05) solid transparent;\n  border-top-color: #ff1d5e;\n  border-left-color: #ff1d5e;\n  animation: semipolar-spinner-animation 2s infinite;\n}\n.semipolar-spinner .ring:nth-child(1) {\n  height: calc(65px - 65px * 0.2 * 0);\n  width: calc(65px - 65px * 0.2 * 0);\n  top: calc(65px * 0.1 * 0);\n  left: calc(65px * 0.1 * 0);\n  animation-delay: calc(2000ms * 0.1 * 4);\n  z-index: 5;\n}\n.semipolar-spinner .ring:nth-child(2) {\n  height: calc(65px - 65px * 0.2 * 1);\n  width: calc(65px - 65px * 0.2 * 1);\n  top: calc(65px * 0.1 * 1);\n  left: calc(65px * 0.1 * 1);\n  animation-delay: calc(2000ms * 0.1 * 3);\n  z-index: 4;\n}\n.semipolar-spinner .ring:nth-child(3) {\n  height: calc(65px - 65px * 0.2 * 2);\n  width: calc(65px - 65px * 0.2 * 2);\n  top: calc(65px * 0.1 * 2);\n  left: calc(65px * 0.1 * 2);\n  animation-delay: calc(2000ms * 0.1 * 2);\n  z-index: 3;\n}\n.semipolar-spinner .ring:nth-child(4) {\n  height: calc(65px - 65px * 0.2 * 3);\n  width: calc(65px - 65px * 0.2 * 3);\n  top: calc(65px * 0.1 * 3);\n  left: calc(65px * 0.1 * 3);\n  animation-delay: calc(2000ms * 0.1 * 1);\n  z-index: 2;\n}\n.semipolar-spinner .ring:nth-child(5) {\n  height: calc(65px - 65px * 0.2 * 4);\n  width: calc(65px - 65px * 0.2 * 4);\n  top: calc(65px * 0.1 * 4);\n  left: calc(65px * 0.1 * 4);\n  animation-delay: calc(2000ms * 0.1 * 0);\n  z-index: 1;\n}\n@keyframes semipolar-spinner-animation {\n  50% {\n    transform: rotate(360deg) scale(0.7);\n  }\n}\n"
  },
  {
    "path": "src/app/semipolar-spinner/semipolar-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SemipolarSpinnerComponent } from './semipolar-spinner.component';\n\ndescribe('SemipolarSpinnerComponent', () => {\n  let component: SemipolarSpinnerComponent;\n  let fixture: ComponentFixture<SemipolarSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ SemipolarSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(SemipolarSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/semipolar-spinner/semipolar-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-semipolar-spinner',\n  template: `\n    <div class=\"semipolar-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"ring\" *ngFor=\"let rs of ringsStyles\" [ngStyle]=\"rs\"></div>\n    </div>\n  `,\n  styleUrls: ['./semipolar-spinner.component.css']\n})\nexport class SemipolarSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 2000;\n  @Input() size = 65;\n  @Input() color = '#fff';\n\n  ringsNum = 5;\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get ringStyle(): object {\n    return {\n      animationDuration: `${this.animationDuration}ms`,\n      borderTopColor: this.color,\n      borderLeftColor: this.color\n    };\n  }\n\n  get ringsStyles(): object {\n    const ringsStyles = [];\n    const delayModifier = 0.1;\n    const ringWidth = this.size * 0.05;\n    const positionIncrement = ringWidth * 2;\n    const sizeDecrement = this.size * 0.2;\n\n    for (let i = 0; i < this.ringsNum; i++) {\n      const computedSize = `${this.size - sizeDecrement * i}px`;\n      const computedPosition = `${positionIncrement * i}px`;\n      const style = {\n        animationDelay: `${this.animationDuration * delayModifier * (this.ringsNum - i - 1)}ms`,\n        height: computedSize,\n        width: computedSize,\n        left: computedPosition,\n        top: computedPosition,\n        borderWidth: `${ringWidth}px`,\n        ...this.ringStyle\n      };\n      ringsStyles.push(style);\n    }\n    return ringsStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/semipolar-spinner/semipolar-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {SemipolarSpinnerComponent} from './semipolar-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [SemipolarSpinnerComponent],\n  declarations: [SemipolarSpinnerComponent],\n  providers: [],\n})\nexport class SemipolarSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/services/utils.service.spec.ts",
    "content": "import { TestBed, inject } from '@angular/core/testing';\n\nimport { UtilsService } from './utils.service';\n\ndescribe('UtilsService', () => {\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      providers: [UtilsService]\n    });\n  });\n\n  it('should be created', inject([UtilsService], (service: UtilsService) => {\n    expect(service).toBeTruthy();\n  }));\n});\n"
  },
  {
    "path": "src/app/services/utils.service.ts",
    "content": "import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class UtilsService {\n\n  constructor() { }\n\n}\n"
  },
  {
    "path": "src/app/spring-spinner/spring-spinner.component.css",
    "content": ".spring-spinner, .spring-spinner * {\n  box-sizing: border-box;\n}\n.spring-spinner {\n  height: 60px;\n  width: 60px;\n}\n.spring-spinner .spring-spinner-part {\n  overflow: hidden;\n  height: calc(60px / 2);\n  width: 60px;\n}\n.spring-spinner  .spring-spinner-part.bottom {\n  transform: rotate(180deg) scale(-1, 1);\n}\n.spring-spinner .spring-spinner-rotator {\n  width: 60px;\n  height: 60px;\n  border: calc(60px / 7) solid transparent;\n  border-right-color: #ff1d5e;\n  border-top-color: #ff1d5e;\n  border-radius: 50%;\n  box-sizing: border-box;\n  animation: spring-spinner-animation 3s ease-in-out infinite;\n  transform: rotate(-200deg);\n}\n@keyframes spring-spinner-animation {\n  0% {\n    border-width: calc(60px / 7);\n  }\n  25% {\n    border-width: calc(60px / 23.33);\n  }\n  50% {\n    transform: rotate(115deg);\n    border-width: calc(60px / 7);\n  }\n  75% {\n    border-width: calc(60px / 23.33);\n  }\n  100% {\n    border-width: calc(60px / 7);\n  }\n}\n"
  },
  {
    "path": "src/app/spring-spinner/spring-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SpringSpinnerComponent } from './spring-spinner.component';\n\ndescribe('SpringSpinnerComponent', () => {\n  let component: SpringSpinnerComponent;\n  let fixture: ComponentFixture<SpringSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ SpringSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(SpringSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/spring-spinner/spring-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-spring-spinner',\n  template: `\n    <div class=\"spring-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"spring-spinner-part top\" [ngStyle]=\"spinnerPartStyle\">\n        <div class=\"spring-spinner-rotator\" [ngStyle]=\"rotatorStyle\"></div>\n      </div>\n      <div class=\"spring-spinner-part bottom\" [ngStyle]=\"spinnerPartStyle\">\n        <div class=\"spring-spinner-rotator\" [ngStyle]=\"rotatorStyle\"></div>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./spring-spinner.component.css']\n})\nexport class SpringSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() size = 60;\n  @Input() color = '#fff';\n  @Input() animationDuration = 2000;\n\n  animationBaseName = 'spring-spinner-animation';\n  currentAnimationName = '';\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get spinnerPartStyle(): object {\n    return {\n      height: `${this.size / 2}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get rotatorStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      borderRightColor: this.color,\n      borderTopColor: this.color,\n      borderWidth: `${this.size / 7}px`,\n      animationDuration: `${this.animationDuration}ms`,\n      animationName: this.currentAnimationName\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/spring-spinner/spring-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {SpringSpinnerComponent} from './spring-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [SpringSpinnerComponent],\n  declarations: [SpringSpinnerComponent],\n  providers: [],\n})\nexport class SpringSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.css",
    "content": ".swapping-squares-spinner, .swapping-squares-spinner * {\n  box-sizing: border-box;\n}\n.swapping-squares-spinner {\n  height: 65px;\n  width: 65px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.swapping-squares-spinner .square {\n  height: calc(65px * 0.25 / 1.3);\n  width:  calc(65px * 0.25 / 1.3);\n  animation-duration: 1000ms;\n  border: calc(65px * 0.04 / 1.3) solid #ff1d5e;\n  margin-right: auto;\n  margin-left: auto;\n  position: absolute;\n  animation-iteration-count: infinite;\n}\n.swapping-squares-spinner .square:nth-child(1) {\n  animation-name: swapping-squares-animation-child-1;\n  animation-delay: 500ms;\n}\n.swapping-squares-spinner .square:nth-child(2) {\n  animation-name: swapping-squares-animation-child-2;\n  animation-delay: 0ms;\n}\n.swapping-squares-spinner .square:nth-child(3) {\n  animation-name: swapping-squares-animation-child-3;\n  animation-delay: 500ms;\n}\n.swapping-squares-spinner .square:nth-child(4) {\n  animation-name: swapping-squares-animation-child-4;\n  animation-delay: 0ms;\n}\n@keyframes swapping-squares-animation-child-1 {\n  50% {\n    transform: translate(150%,150%) scale(2,2);\n  }\n}\n@keyframes swapping-squares-animation-child-2 {\n  50% {\n    transform: translate(-150%,150%) scale(2,2);\n  }\n}\n@keyframes swapping-squares-animation-child-3 {\n  50% {\n    transform: translate(-150%,-150%) scale(2,2);\n  }\n}\n@keyframes swapping-squares-animation-child-4 {\n  50% {\n    transform: translate(150%,-150%) scale(2,2);\n  }\n}\n"
  },
  {
    "path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SwappingSquaresSpinnerComponent } from './swapping-squares-spinner.component';\n\ndescribe('SwappingSquaresSpinnerComponent', () => {\n  let component: SwappingSquaresSpinnerComponent;\n  let fixture: ComponentFixture<SwappingSquaresSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ SwappingSquaresSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(SwappingSquaresSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-swapping-squares-spinner',\n  template: `\n    <div class=\"swapping-squares-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"square\"\n           *ngFor=\"let ss of squaresStyles; let i = index;\"\n           [ngClass]=\"'square-' + (i + 1)\"\n           [ngStyle]=\"ss\">\n      </div>\n    </div>\n  `,\n  styleUrls: ['./swapping-squares-spinner.component.css']\n})\nexport class SwappingSquaresSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  @Input() animationDuration = 1000;\n  @Input() size = 65;\n  @Input() color = '#fff';\n\n  animationBaseName = 'swapping-square-animation-child';\n  squaresNum = 4;\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`\n    };\n  }\n\n  get squareStyle(): object {\n    return {\n      height: `${this.size * 0.25 / 1.3}px`,\n      width: `${this.size * 0.25 / 1.3}px`,\n      animationDuration: `${this.animationDuration}ms`,\n      borderWidth: `${this.size * 0.04 / 1.3}px`,\n      borderColor: this.color\n    };\n  }\n\n  get squaresStyles(): object {\n    const squaresStyles = [];\n    const delay = this.animationDuration * 0.5;\n\n    for (let i = 1; i <= this.squaresNum; i++) {\n      squaresStyles.push({\n        animationDelay: `${i % 2 === 0 ? delay : 0}ms`,\n        ...this.squareStyle\n      });\n    }\n    return squaresStyles;\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/swapping-squares-spinner/swapping-squares-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {SwappingSquaresSpinnerComponent} from './swapping-squares-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [SwappingSquaresSpinnerComponent],\n  declarations: [SwappingSquaresSpinnerComponent],\n  providers: [],\n})\nexport class SwappingSquaresSpinnerModule {\n}\n"
  },
  {
    "path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.css",
    "content": ".trinity-rings-spinner, .trinity-rings-spinner * {\n  box-sizing: border-box;\n}\n.trinity-rings-spinner {\n  height: 66px;\n  width: 66px;\n  padding: 3px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.trinity-rings-spinner .circle {\n  position:absolute;\n  display:block;\n  border-radius:50%;\n  border: 3px solid #ff1d5e;\n  opacity: 1;\n}\n.trinity-rings-spinner .circle:nth-child(1) {\n  height: 60px;\n  width: 60px;\n  animation : trinity-rings-spinner-circle1-animation 1.5s infinite linear;\n  border-width: 3px;\n}\n.trinity-rings-spinner .circle:nth-child(2) {\n  height: calc(60px * 0.65);\n  width: calc(60px * 0.65);\n  animation : trinity-rings-spinner-circle2-animation 1.5s infinite linear;\n  border-width: 2px;\n}\n.trinity-rings-spinner .circle:nth-child(3) {\n  height: calc(60px * 0.1);\n  width: calc(60px * 0.1);\n  animation:trinity-rings-spinner-circle3-animation 1.5s infinite linear;\n  border-width: 1px;\n}\n@keyframes trinity-rings-spinner-circle1-animation{\n  0% {\n    transform: rotateZ(20deg) rotateY(0deg);\n  }\n  100% {\n    transform: rotateZ(100deg) rotateY(360deg);\n  }\n}\n@keyframes trinity-rings-spinner-circle2-animation{\n  0% {\n    transform: rotateZ(100deg) rotateX(0deg);\n  }\n  100% {\n    transform: rotateZ(0deg) rotateX(360deg);\n  }\n}\n@keyframes trinity-rings-spinner-circle3-animation{\n  0% {\n    transform: rotateZ(100deg) rotateX(-360deg);\n  }\n  100% {\n    transform: rotateZ(-360deg) rotateX(360deg);\n  }\n}\n"
  },
  {
    "path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.spec.ts",
    "content": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { TrinityRingsSpinnerComponent } from './trinity-rings-spinner.component';\n\ndescribe('TrinityRingsSpinnerComponent', () => {\n  let component: TrinityRingsSpinnerComponent;\n  let fixture: ComponentFixture<TrinityRingsSpinnerComponent>;\n\n  beforeEach(async(() => {\n    TestBed.configureTestingModule({\n      declarations: [ TrinityRingsSpinnerComponent ]\n    })\n    .compileComponents();\n  }));\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(TrinityRingsSpinnerComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it('should create', () => {\n    expect(component).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.ts",
    "content": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'app-trinity-rings-spinner',\n  template: `\n    <div class=\"trinity-rings-spinner\" [ngStyle]=\"spinnerStyle\">\n      <div class=\"circle circle1\" [ngStyle]=\"ring1Style\"></div>\n      <div class=\"circle circle3\" [ngStyle]=\"ring3Style\"></div>\n      <div class=\"circle circle2\" [ngStyle]=\"ring2Style\"></div>\n    </div>\n  `,\n  styleUrls: ['./trinity-rings-spinner.component.css']\n})\nexport class TrinityRingsSpinnerComponent implements OnInit {\n\n  constructor() {\n  }\n\n  containerPadding = 3;\n\n  @Input() animationDuration = 1500;\n  @Input() size = 60;\n  @Input() color = '#fff';\n\n  get outerRingSize(): number {\n    return this.size - this.containerPadding * 2;\n  }\n\n  get spinnerStyle(): object {\n    return {\n      height: `${this.size}px`,\n      width: `${this.size}px`,\n      padding: `${this.containerPadding}px`\n    };\n  }\n\n  get ring1Style(): object {\n    return {\n      height: `${this.outerRingSize}px`,\n      width: `${this.outerRingSize}px`,\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get ring2Style(): object {\n    return {\n      height: `${this.outerRingSize * 0.65}px`,\n      width: `${this.outerRingSize * 0.65}px`,\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  get ring3Style(): object {\n    return {\n      height: `${this.outerRingSize * 0.1}px`,\n      width: `${this.outerRingSize * 0.1}px`,\n      borderColor: this.color,\n      animationDuration: `${this.animationDuration}ms`\n    };\n  }\n\n  ngOnInit() {\n  }\n\n}\n"
  },
  {
    "path": "src/app/trinity-rings-spinner/trinity-rings-spinner.module.ts",
    "content": "import {NgModule} from '@angular/core';\n\nimport {TrinityRingsSpinnerComponent} from './trinity-rings-spinner.component';\nimport {CommonModule} from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [TrinityRingsSpinnerComponent],\n  declarations: [TrinityRingsSpinnerComponent],\n  providers: [],\n})\nexport class TrinityRingsSpinnerModule {\n}\n"
  },
  {
    "path": "src/environments/environment.prod.ts",
    "content": "export const environment = {\n  production: true\n};\n"
  },
  {
    "path": "src/environments/environment.ts",
    "content": "export const environment = {\n  production: false\n};\n"
  },
  {
    "path": "src/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>AngularEpicSpinners</title>\n  <base href=\"/\">\n\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n  <link href=\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700\" rel=\"stylesheet\">\n</head>\n<body>\n  <app-root></app-root>\n</body>\n</html>\n"
  },
  {
    "path": "src/main.ts",
    "content": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err => console.log(err));\n"
  },
  {
    "path": "src/polyfills.ts",
    "content": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),\n * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE9, IE10 and IE11 requires all of the following polyfills. **/\n// import 'core-js/es6/symbol';\n// import 'core-js/es6/object';\n// import 'core-js/es6/function';\n// import 'core-js/es6/parse-int';\n// import 'core-js/es6/parse-float';\n// import 'core-js/es6/number';\n// import 'core-js/es6/math';\n// import 'core-js/es6/string';\n// import 'core-js/es6/date';\n// import 'core-js/es6/array';\n// import 'core-js/es6/regexp';\n// import 'core-js/es6/map';\n// import 'core-js/es6/weak-map';\n// import 'core-js/es6/set';\n\n/** IE10 and IE11 requires the following for NgClass support on SVG elements */\n// import 'classlist.js';  // Run `npm install --save classlist.js`.\n\n/** IE10 and IE11 requires the following for the Reflect API. */\n// import 'core-js/es6/reflect';\n\n\n/** Evergreen browsers require these. **/\n// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.\nimport 'core-js/es7/reflect';\n\n\n/**\n * Required to support Web Animations `@angular/platform-browser/animations`.\n * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation\n **/\n// import 'web-animations-js';  // Run `npm install --save web-animations-js`.\n\n\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone';  // Included with Angular CLI.\n\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n"
  },
  {
    "path": "src/styles.css",
    "content": "/* You can add global styles to this file, and also import other style files */\nbody, main, html{\n  margin: 0;\n  height: 100%;\n  font-family: 'Roboto Mono', monospace;\n}\n\nbody{\n  background: #030810;\n;\n}\n"
  },
  {
    "path": "src/test.ts",
    "content": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/long-stack-trace-zone';\nimport 'zone.js/dist/proxy.js';\nimport 'zone.js/dist/sync-test';\nimport 'zone.js/dist/jasmine-patch';\nimport 'zone.js/dist/async-test';\nimport 'zone.js/dist/fake-async-test';\nimport { getTestBed } from '@angular/core/testing';\nimport {\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting\n} from '@angular/platform-browser-dynamic/testing';\n\n// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.\ndeclare const __karma__: any;\ndeclare const require: any;\n\n// Prevent Karma from running prematurely.\n__karma__.loaded = function () {};\n\n// First, initialize the Angular testing environment.\ngetTestBed().initTestEnvironment(\n  BrowserDynamicTestingModule,\n  platformBrowserDynamicTesting()\n);\n// Then we find all the tests.\nconst context = require.context('./', true, /\\.spec\\.ts$/);\n// And load the modules.\ncontext.keys().map(context);\n// Finally, start Karma to run the tests.\n__karma__.start();\n"
  },
  {
    "path": "src/tsconfig.app.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/app\",\n    \"baseUrl\": \"./\",\n    \"module\": \"es2015\",\n    \"types\": []\n  },\n  \"exclude\": [\n    \"test.ts\",\n    \"**/*.spec.ts\"\n  ]\n}\n"
  },
  {
    "path": "src/tsconfig.spec.json",
    "content": "{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/spec\",\n    \"baseUrl\": \"./\",\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"types\": [\n      \"jasmine\",\n      \"node\"\n    ]\n  },\n  \"files\": [\n    \"test.ts\",\n    \"polyfills.ts\"\n  ],\n  \"include\": [\n    \"**/*.spec.ts\",\n    \"**/*.d.ts\"\n  ]\n}\n"
  },
  {
    "path": "src/typings.d.ts",
    "content": "/* SystemJS module definition */\ndeclare var module: NodeModule;\ninterface NodeModule {\n  id: string;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"moduleResolution\": \"node\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"target\": \"es5\",\n    \"typeRoots\": [\n      \"node_modules/@types\"\n    ],\n    \"lib\": [\n      \"es2017\",\n      \"dom\"\n    ]\n  }\n}\n"
  },
  {
    "path": "tslint.json",
    "content": "{\n  \"rulesDirectory\": [\n    \"node_modules/codelyzer\"\n  ],\n  \"rules\": {\n    \"arrow-return-shorthand\": true,\n    \"callable-types\": true,\n    \"class-name\": true,\n    \"comment-format\": [\n      true,\n      \"check-space\"\n    ],\n    \"curly\": true,\n    \"deprecation\": {\n      \"severity\": \"warn\"\n    },\n    \"eofline\": true,\n    \"forin\": true,\n    \"import-blacklist\": [\n      true,\n      \"rxjs/Rx\"\n    ],\n    \"import-spacing\": true,\n    \"indent\": [\n      true,\n      \"spaces\"\n    ],\n    \"interface-over-type-literal\": true,\n    \"label-position\": true,\n    \"max-line-length\": [\n      true,\n      140\n    ],\n    \"member-access\": false,\n    \"member-ordering\": [\n      true,\n      {\n        \"order\": [\n          \"static-field\",\n          \"instance-field\",\n          \"static-method\",\n          \"instance-method\"\n        ]\n      }\n    ],\n    \"no-arg\": true,\n    \"no-bitwise\": true,\n    \"no-console\": [\n      true,\n      \"debug\",\n      \"info\",\n      \"time\",\n      \"timeEnd\",\n      \"trace\"\n    ],\n    \"no-construct\": true,\n    \"no-debugger\": true,\n    \"no-duplicate-super\": true,\n    \"no-empty\": false,\n    \"no-empty-interface\": true,\n    \"no-eval\": true,\n    \"no-inferrable-types\": [\n      true,\n      \"ignore-params\"\n    ],\n    \"no-misused-new\": true,\n    \"no-non-null-assertion\": true,\n    \"no-shadowed-variable\": true,\n    \"no-string-literal\": false,\n    \"no-string-throw\": true,\n    \"no-switch-case-fall-through\": true,\n    \"no-trailing-whitespace\": true,\n    \"no-unnecessary-initializer\": true,\n    \"no-unused-expression\": true,\n    \"no-use-before-declare\": true,\n    \"no-var-keyword\": true,\n    \"object-literal-sort-keys\": false,\n    \"one-line\": [\n      true,\n      \"check-open-brace\",\n      \"check-catch\",\n      \"check-else\",\n      \"check-whitespace\"\n    ],\n    \"prefer-const\": true,\n    \"quotemark\": [\n      true,\n      \"single\"\n    ],\n    \"radix\": true,\n    \"semicolon\": [\n      true,\n      \"always\"\n    ],\n    \"triple-equals\": [\n      true,\n      \"allow-null-check\"\n    ],\n    \"typedef-whitespace\": [\n      true,\n      {\n        \"call-signature\": \"nospace\",\n        \"index-signature\": \"nospace\",\n        \"parameter\": \"nospace\",\n        \"property-declaration\": \"nospace\",\n        \"variable-declaration\": \"nospace\"\n      }\n    ],\n    \"typeof-compare\": true,\n    \"unified-signatures\": true,\n    \"variable-name\": false,\n    \"whitespace\": [\n      true,\n      \"check-branch\",\n      \"check-decl\",\n      \"check-operator\",\n      \"check-separator\",\n      \"check-type\"\n    ],\n    \"directive-selector\": [\n      true,\n      \"attribute\",\n      \"app\",\n      \"camelCase\"\n    ],\n    \"component-selector\": [\n      true,\n      \"element\",\n      \"app\",\n      \"kebab-case\"\n    ],\n    \"no-output-on-prefix\": true,\n    \"use-input-property-decorator\": true,\n    \"use-output-property-decorator\": true,\n    \"use-host-property-decorator\": true,\n    \"no-input-rename\": true,\n    \"no-output-rename\": true,\n    \"use-life-cycle-interface\": true,\n    \"use-pipe-transform-interface\": true,\n    \"component-class-suffix\": true,\n    \"directive-class-suffix\": true\n  }\n}\n"
  }
]