Repository: HackAfro/angular-epic-spinners Branch: master Commit: 8146b1d40a29 Files: 114 Total size: 114.5 KB Directory structure: gitextract_dq7x6ghw/ ├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── angular.json ├── e2e/ │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── ng-package.json ├── package.json ├── protractor.conf.js ├── public_api.ts ├── src/ │ ├── app/ │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── atom-spinner/ │ │ │ ├── atom-spinner.component.css │ │ │ ├── atom-spinner.component.spec.ts │ │ │ ├── atom-spinner.component.ts │ │ │ └── atom-spinner.module.ts │ │ ├── breeding-rhombus-spinner/ │ │ │ ├── breeding-rhombus-spinner.component.css │ │ │ ├── breeding-rhombus-spinner.component.spec.ts │ │ │ ├── breeding-rhombus-spinner.component.ts │ │ │ └── breeding-rhombus-spinner.module.ts │ │ ├── circles-to-rhumbuses-spinner/ │ │ │ ├── circles-to-rhumbuses-spinner.component.css │ │ │ ├── circles-to-rhumbuses-spinner.component.spec.ts │ │ │ ├── circles-to-rhumbuses-spinner.component.ts │ │ │ └── circles-to-rhumbuses-spinner.module.ts │ │ ├── fingerprint-spinner/ │ │ │ ├── fingerprint-spinner.component.css │ │ │ ├── fingerprint-spinner.component.spec.ts │ │ │ ├── fingerprint-spinner.component.ts │ │ │ └── fingerprint-spinner.module.ts │ │ ├── flower-spinner/ │ │ │ ├── flower-spinner.component.css │ │ │ ├── flower-spinner.component.spec.ts │ │ │ ├── flower-spinner.component.ts │ │ │ └── flower-spinner.module.ts │ │ ├── fulfilling-bouncing-circle-spinner/ │ │ │ ├── fulfilling-bouncing-circle-spinner.component.css │ │ │ ├── fulfilling-bouncing-circle-spinner.component.spec.ts │ │ │ ├── fulfilling-bouncing-circle-spinner.component.ts │ │ │ └── fulfilling-bouncing-circle-spinner.module.ts │ │ ├── fulfilling-square-spinner/ │ │ │ ├── fulfilling-square-spinner.component.css │ │ │ ├── fulfilling-square-spinner.component.spec.ts │ │ │ ├── fulfilling-square-spinner.component.ts │ │ │ └── fulfilling-square-spinner.module.ts │ │ ├── half-circle-spinner/ │ │ │ ├── half-circle-spinner.component.css │ │ │ ├── half-circle-spinner.component.spec.ts │ │ │ ├── half-circle-spinner.component.ts │ │ │ └── half-circle-spinner.module.ts │ │ ├── hollow-dots-spinner/ │ │ │ ├── hollow-dots-spinner.component.css │ │ │ ├── hollow-dots-spinner.component.spec.ts │ │ │ ├── hollow-dots-spinner.component.ts │ │ │ └── hollow-dots-spinner.module.ts │ │ ├── intersecting-circles-spinner/ │ │ │ ├── intersecting-circles-spinner.component.css │ │ │ ├── intersecting-circles-spinner.component.spec.ts │ │ │ ├── intersecting-circles-spinner.component.ts │ │ │ └── intersecting-circles-spinner.module.ts │ │ ├── looping-rhombuses-spinner/ │ │ │ ├── looping-rhombuses-spinner.component.css │ │ │ ├── looping-rhombuses-spinner.component.spec.ts │ │ │ ├── looping-rhumbuses-spinner.component.ts │ │ │ └── looping-rhumbuses-spinner.module.ts │ │ ├── orbit-spinner/ │ │ │ ├── orbit-spinner.component.css │ │ │ ├── orbit-spinner.component.spec.ts │ │ │ ├── orbit-spinner.component.ts │ │ │ └── orbit-spinner.module.ts │ │ ├── pixel-spinner/ │ │ │ ├── pixel-spinner.component.css │ │ │ ├── pixel-spinner.component.spec.ts │ │ │ ├── pixel-spinner.component.ts │ │ │ └── pixel-spinner.module.ts │ │ ├── radar-spinner/ │ │ │ ├── radar-spinner.component.css │ │ │ ├── radar-spinner.component.spec.ts │ │ │ ├── radar-spinner.component.ts │ │ │ └── radar-spinner.module.ts │ │ ├── scaling-squares-spinner/ │ │ │ ├── scaling-squares-spinner.component.css │ │ │ ├── scaling-squares-spinner.component.spec.ts │ │ │ ├── scaling-squares-spinner.component.ts │ │ │ └── scaling-squares-spinner.module.ts │ │ ├── self-building-square-spinner/ │ │ │ ├── self-building-square-spinner.component.css │ │ │ ├── self-building-square-spinner.component.spec.ts │ │ │ ├── self-building-square-spinner.component.ts │ │ │ └── self-building-square-spinner.module.ts │ │ ├── semipolar-spinner/ │ │ │ ├── semipolar-spinner.component.css │ │ │ ├── semipolar-spinner.component.spec.ts │ │ │ ├── semipolar-spinner.component.ts │ │ │ └── semipolar-spinner.module.ts │ │ ├── services/ │ │ │ ├── utils.service.spec.ts │ │ │ └── utils.service.ts │ │ ├── spring-spinner/ │ │ │ ├── spring-spinner.component.css │ │ │ ├── spring-spinner.component.spec.ts │ │ │ ├── spring-spinner.component.ts │ │ │ └── spring-spinner.module.ts │ │ ├── swapping-squares-spinner/ │ │ │ ├── swapping-squares-spinner.component.css │ │ │ ├── swapping-squares-spinner.component.spec.ts │ │ │ ├── swapping-squares-spinner.component.ts │ │ │ └── swapping-squares-spinner.module.ts │ │ └── trinity-rings-spinner/ │ │ ├── trinity-rings-spinner.component.css │ │ ├── trinity-rings-spinner.component.spec.ts │ │ ├── trinity-rings-spinner.component.ts │ │ └── trinity-rings-spinner.module.ts │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # Editor configuration, see http://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false ================================================ FILE: .gitignore ================================================ # See http://help.github.com/ignore-files/ for more about ignoring files. # compiled output /dist /tmp /out-tsc # dependencies /node_modules # IDEs and editors /.idea .project .classpath .c9/ *.launch .settings/ *.sublime-workspace # IDE - VSCode .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json # misc /.sass-cache /connect.lock /coverage /libpeerconnection.log npm-debug.log testem.log /typings # e2e /e2e/*.js /e2e/*.map # System Files .DS_Store Thumbs.db ================================================ FILE: .npmignore ================================================ /.idea /node_modules /dist .travis.yml tsconfig.json tslint.json /e2e /src/test.ts /src/tsconfig.app.json /src/environments/ /src/typings.d.ts /src/tsconfig.spec.json karma.conf.js protractor.conf.js yarn.lock ================================================ FILE: .travis.yml ================================================ sudo: required dist: trusty language: node_js node_js: - '8.0.0' addons: apt: sources: - google-chrome packages: - google-chrome-stable - google-chrome-beta before_install: - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start before_script: - npm install -g angular-cli - npm install -g karma - npm install - ng build script: karma start karma.conf.js --single-run ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2018 Richard Afro Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Angular Epic Spinners [![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)]() Reusable angular components for epic spinners ## Demo Visit the [demo](http://hackafro.github.io/angular-epic-spinners/) page to see spinners in action ## Installation `npm install --save angular-epic-spinners` OR `yarn install angular-epic-spinners` ## Usage Example Import each spinners' module into your module file and use the spinner component anywhere. ```typescript import {AtomSpinnerModule} from 'angular-epic-spinners' @NgModule({ imports: [AtomSpinnerModule] }) ``` Then in your html file ```html ``` ## Components list You can easily configure spinners' size, color and animation speed ```html ``` ## Support? - Star the repo :star: - Create pull requests - Follow me on twitter [@iamAfro](https://twitter.com/iamafro) ## License [MIT](https://github.com/HackAfro/angular-epic-spinners/blob/v1.0.3/LICENSE) license. ================================================ FILE: angular.json ================================================ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular-epic-spinners": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "angular-epic-spinners:build" }, "configurations": { "production": { "browserTarget": "angular-epic-spinners:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "angular-epic-spinners:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [], "styles": [ "src/styles.css" ], "assets": [ "src/assets", "src/favicon.ico" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "angular-epic-spinners-e2e": { "root": "", "sourceRoot": "e2e", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "angular-epic-spinners:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "angular-epic-spinners", "schematics": { "@schematics/angular:component": { "prefix": "app", "styleext": "scss" }, "@schematics/angular:directive": { "prefix": "app" } } } ================================================ FILE: e2e/app.e2e-spec.ts ================================================ import { AppPage } from './app.po'; describe('angular-epic-spinners App', () => { let page: AppPage; beforeEach(() => { page = new AppPage(); }); it('should display welcome message', () => { page.navigateTo(); expect(page.getParagraphText()).toEqual('Welcome to app!'); }); }); ================================================ FILE: e2e/app.po.ts ================================================ import { browser, by, element } from 'protractor'; export class AppPage { navigateTo() { return browser.get('/'); } getParagraphText() { return element(by.css('app-root h1')).getText(); } } ================================================ FILE: e2e/tsconfig.e2e.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/e2e", "baseUrl": "./", "module": "commonjs", "target": "es5", "types": [ "jasmine", "jasminewd2", "node" ] } } ================================================ FILE: karma.conf.js ================================================ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client:{ clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); }; ================================================ FILE: ng-package.json ================================================ { "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" } } ================================================ FILE: package.json ================================================ { "name": "angular-epic-spinners", "version": "2.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod --base-href \"https://hackafro.github.io/angular-epic-spinners/\"", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "packagr": "ng-packagr -p ng-package.json", "deploy": "npm run build && ngh", "pack": "npm pack" }, "repository": { "type": "git", "url": "git+https://github.com/hackafro/angular-epic-spinners" }, "author": "iamAfro ", "url": "https://github.com/hackafro/angular-epic-spinners", "private": false, "devDependencies": { "@angular/core": "^7.0.1", "@angular-devkit/build-angular": "~0.6.8", "@angular/animations": "^7.0.1", "@angular/cli": "^7.0.3", "@angular/common": "^7.0.1", "@angular/compiler": "^7.0.1", "@angular/compiler-cli": "^7.0.1", "@angular/forms": "^7.0.1", "@angular/http": "^7.0.1", "@angular/language-service": "^7.0.1", "@angular/platform-browser": "^7.0.1", "@angular/platform-browser-dynamic": "^7.0.1", "@types/node": "~6.0.60", "angular-cli-ghpages": "^0.5.2", "codelyzer": "^4.0.1", "concurrently": "^3.5.1", "core-js": "^2.4.1", "ng-packagr": "^4.4.0", "rxjs": "^6.2.0", "rxjs-compat": "^6.0.0-rc.0", "ts-node": "~3.2.0", "tsickle": "^0.33.1", "tslib": "^1.9.0", "tslint": "~5.7.0", "typescript": "3.1", "zone.js": "^0.8.26" } } ================================================ FILE: protractor.conf.js ================================================ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts const { SpecReporter } = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeout: 11000, specs: [ './e2e/**/*.e2e-spec.ts' ], capabilities: { 'browserName': 'chrome' }, directConnect: true, baseUrl: 'http://localhost:4200/', framework: 'jasmine', jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, print: function() {} }, onPrepare() { require('ts-node').register({ project: 'e2e/tsconfig.e2e.json' }); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } }; ================================================ FILE: public_api.ts ================================================ export * from './src/app/atom-spinner/atom-spinner.module'; export * from './src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module'; export * from './src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module'; export * from './src/app/fingerprint-spinner/fingerprint-spinner.module'; export * from './src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module'; export * from './src/app/flower-spinner/flower-spinner.module'; export * from './src/app/fulfilling-square-spinner/fulfilling-square-spinner.module'; export * from './src/app/half-circle-spinner/half-circle-spinner.module'; export * from './src/app/hollow-dots-spinner/hollow-dots-spinner.module'; export * from './src/app/intersecting-circles-spinner/intersecting-circles-spinner.module'; export * from './src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module'; export * from './src/app/orbit-spinner/orbit-spinner.module'; export * from './src/app/pixel-spinner/pixel-spinner.module'; export * from './src/app/radar-spinner/radar-spinner.module'; export * from './src/app/scaling-squares-spinner/scaling-squares-spinner.module'; export * from './src/app/self-building-square-spinner/self-building-square-spinner.module'; export * from './src/app/semipolar-spinner/semipolar-spinner.module'; export * from './src/app/spring-spinner/spring-spinner.module'; export * from './src/app/swapping-squares-spinner/swapping-squares-spinner.module'; export * from './src/app/trinity-rings-spinner/trinity-rings-spinner.module'; ================================================ FILE: src/app/app.component.html ================================================

Angular Epic Spinners

Angular Implementation of Epic Spinners

Get started

Docs

npm install angular-epic-spinners

yarn add angular-epic-spinners

================================================ FILE: src/app/app.component.scss ================================================ // I changed this file to scss to enable me display the name on hover. // The implementation was easier and more readable with scss .main-container { display: flex; flex-wrap: wrap; padding: 20px; width: 90%; margin: 0 auto; .title-holder { width: 100%; margin: 30px 0; .header { color: whitesmoke; opacity: .80; text-transform: uppercase; font-size: 25px; margin-bottom: 3px; text-align: center; } .sub-header { color: whitesmoke; opacity: .60; font-size: 18px; text-align: center; margin: 5px 0; } } } .link { color: #ff1d5e; text-decoration: none; text-transform: uppercase; &:hover { text-decoration: underline; } } .get-started { margin-top: 50px; .get-started__docs { display: flex; justify-content: center; h4 { color: #9e3050; margin: 20px 10px; text-align: center; display: inline-block; } .docs { @extend h4; margin-left: 10px; text-transform: uppercase; } } .get-started-code { background: #030810 + 40; color: whitesmoke; padding: 10px 40px; text-align: center; width: fit-content; display: flex; flex-direction: column; margin: auto; border-radius: 3px; p { margin: 10px 0; font-size: 13px; } } } .spinner-holder { width: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px 10px; margin: 30px 0; min-height: 150px; &:hover { .name { display: block; } background: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 1px 4px 5px 0 #9e3050; } } .name { display: none; padding: 10px 0; font-size: 12px; color: rgba(0, 0, 0, 0.3); font-weight: bold; text-transform: uppercase; margin: 15px 0 0; } footer{ padding: 30px 55px; background: #030810 + 45; color: whitesmoke; h4{ margin: 10px 0; } p{ font-size: 14px; } a{ text-transform: capitalize; } } @media (max-width: 675px) { .spinner-holder{ width: 40%; } footer{ padding: 20px 15px; p{ font-size: 12px; } } } ================================================ FILE: src/app/app.component.spec.ts ================================================ import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it(`should have as title 'app'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('app'); })); it('should render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); })); }); ================================================ FILE: src/app/app.component.ts ================================================ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'apps'; } ================================================ FILE: src/app/app.module.ts ================================================ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {AtomSpinnerModule} from './atom-spinner/atom-spinner.module'; import {BreedingRhombusSpinnerModule} from './breeding-rhombus-spinner/breeding-rhombus-spinner.module'; import {FlowerSpinnerModule} from './flower-spinner/flower-spinner.module'; import {FulfillingBouncingCircleSpinnerModule} from './fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module'; import {FulfillingSquareSpinnerModule} from './fulfilling-square-spinner/fulfilling-square-spinner.module'; import {HalfCircleSpinnerModule} from './half-circle-spinner/half-circle-spinner.module'; import {LoopingRhumbusesSpinnerModule} from './looping-rhombuses-spinner/looping-rhumbuses-spinner.module'; import {IntersectingCirclesSpinnerModule} from './intersecting-circles-spinner/intersecting-circles-spinner.module'; import {HollowDotsSpinnerModule} from './hollow-dots-spinner/hollow-dots-spinner.module'; import {PixelSpinnerModule} from './pixel-spinner/pixel-spinner.module'; import {OrbitSpinnerModule} from './orbit-spinner/orbit-spinner.module'; import {ScalingSquaresSpinnerModule} from './scaling-squares-spinner/scaling-squares-spinner.module'; import {SemipolarSpinnerModule} from './semipolar-spinner/semipolar-spinner.module'; import {SelfBuildingSquareSpinnerModule} from './self-building-square-spinner/self-building-square-spinner.module'; import {SwappingSquaresSpinnerModule} from './swapping-squares-spinner/swapping-squares-spinner.module'; import {RadarSpinnerModule} from './radar-spinner/radar-spinner.module'; import {SpringSpinnerModule} from './spring-spinner/spring-spinner.module'; import {TrinityRingsSpinnerModule} from './trinity-rings-spinner/trinity-rings-spinner.module'; import {CirclesToRhumbusesSpinnerModule} from './circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module'; import {FingerprintSpinnerModule} from './fingerprint-spinner/fingerprint-spinner.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AtomSpinnerModule, BreedingRhombusSpinnerModule, CirclesToRhumbusesSpinnerModule, FingerprintSpinnerModule, FlowerSpinnerModule, FulfillingBouncingCircleSpinnerModule, FulfillingSquareSpinnerModule, HalfCircleSpinnerModule, HollowDotsSpinnerModule, IntersectingCirclesSpinnerModule, LoopingRhumbusesSpinnerModule, OrbitSpinnerModule, PixelSpinnerModule, RadarSpinnerModule, ScalingSquaresSpinnerModule, SelfBuildingSquareSpinnerModule, SemipolarSpinnerModule, SpringSpinnerModule, SwappingSquaresSpinnerModule, TrinityRingsSpinnerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ================================================ FILE: src/app/atom-spinner/atom-spinner.component.css ================================================ .atom-spinner, .atom-spinner * { box-sizing: border-box; } .atom-spinner { height: 60px; width: 60px; overflow: hidden; } .atom-spinner .spinner-inner { position: relative; display: block; height: 100%; width: 100%; } .atom-spinner .spinner-circle { display: block; position: absolute; color: #ff1d5e; font-size: calc(60px * 0.24); top: 50%; left: 50%; transform: translate(-50%, -50%); } .atom-spinner .spinner-line { position: absolute; width: 100%; height: 100%; border-radius: 50%; animation-duration: 1s; border-left-width: calc(60px / 25); border-top-width: calc(60px / 25); border-left-color: #ff1d5e; border-left-style: solid; border-top-style: solid; border-top-color: transparent; } .atom-spinner .spinner-line:nth-child(1) { animation: atom-spinner-animation-1 1s linear infinite; transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg); } .atom-spinner .spinner-line:nth-child(2) { animation: atom-spinner-animation-2 1s linear infinite; transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg); } .atom-spinner .spinner-line:nth-child(3) { animation: atom-spinner-animation-3 1s linear infinite; transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg); } @keyframes atom-spinner-animation-1 { 100% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); } } @keyframes atom-spinner-animation-2 { 100% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); } } @keyframes atom-spinner-animation-3 { 100% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); } } ================================================ FILE: src/app/atom-spinner/atom-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AtomSpinnerComponent } from './atom-spinner.component'; describe('AtomSpinnerComponent', () => { let component: AtomSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AtomSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AtomSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/atom-spinner/atom-spinner.component.ts ================================================ import {Component, OnInit, Input} from '@angular/core'; @Component({ selector: 'app-atom-spinner', template: ` `, styleUrls: ['./atom-spinner.component.css'] }) export class AtomSpinnerComponent implements OnInit { constructor() { } @Input() size = 60; @Input() animationDuration = 1000; @Input() color = 'red'; get spinnerStyle() { return { height: `${this.size}px`, width: `${this.size}px` }; } get circleStyle() { return { color: this.color, fontSize: `${this.size * 0.24}px` }; } get lineStyle() { return { animationDuration: `${this.animationDuration}ms`, borderLeftWidth: `${this.size / 25}px`, borderRightWidth: `${this.size / 25}px`, borderLeftColor: this.color }; } ngOnInit() { } } ================================================ FILE: src/app/atom-spinner/atom-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {AtomSpinnerComponent} from './atom-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [AtomSpinnerComponent], declarations: [AtomSpinnerComponent], providers: [], }) export class AtomSpinnerModule { } ================================================ FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.css ================================================ .breeding-rhombus-spinner { height: 65px; width: 65px; position: relative; transform: rotate(45deg); } .breeding-rhombus-spinner, .breeding-rhombus-spinner * { box-sizing: border-box; } .breeding-rhombus-spinner .rhombus { height: calc(65px / 7.5); width: calc(65px / 7.5); animation-duration: 2000ms; top: calc(65px / 2.3077); left: calc(65px / 2.3077); background-color: #ff1d5e; position: absolute; animation-iteration-count: infinite; } .breeding-rhombus-spinner .rhombus:nth-child(2n+0) { margin-right: 0; } .breeding-rhombus-spinner .rhombus.child-1 { animation-name: breeding-rhombus-spinner-animation-child-1; animation-delay: calc(100ms * 1); } .breeding-rhombus-spinner .rhombus.child-2 { animation-name: breeding-rhombus-spinner-animation-child-2; animation-delay: calc(100ms * 2); } .breeding-rhombus-spinner .rhombus.child-3 { animation-name: breeding-rhombus-spinner-animation-child-3; animation-delay: calc(100ms * 3); } .breeding-rhombus-spinner .rhombus.child-4 { animation-name: breeding-rhombus-spinner-animation-child-4; animation-delay: calc(100ms * 4); } .breeding-rhombus-spinner .rhombus.child-5 { animation-name: breeding-rhombus-spinner-animation-child-5; animation-delay: calc(100ms * 5); } .breeding-rhombus-spinner .rhombus.child-6 { animation-name: breeding-rhombus-spinner-animation-child-6; animation-delay: calc(100ms * 6); } .breeding-rhombus-spinner .rhombus.child-7 { animation-name: breeding-rhombus-spinner-animation-child-7; animation-delay: calc(100ms * 7); } .breeding-rhombus-spinner .rhombus.child-8 { animation-name: breeding-rhombus-spinner-animation-child-8; animation-delay: calc(100ms * 8); } .breeding-rhombus-spinner .rhombus.big { height: calc(65px / 3); width: calc(65px / 3); animation-duration: 2000ms; top: calc(65px / 3); left: calc(65px / 3); background-color: #ff1d5e; animation: breeding-rhombus-spinner-animation-child-big 2s infinite; animation-delay: 0.5s; } @keyframes breeding-rhombus-spinner-animation-child-1 { 50% { transform: translate(-325%, -325%); } } @keyframes breeding-rhombus-spinner-animation-child-2 { 50% { transform: translate(0, -325%); } } @keyframes breeding-rhombus-spinner-animation-child-3 { 50% { transform: translate(325%, -325%); } } @keyframes breeding-rhombus-spinner-animation-child-4 { 50% { transform: translate(325%, 0); } } @keyframes breeding-rhombus-spinner-animation-child-5 { 50% { transform: translate(325%, 325%); } } @keyframes breeding-rhombus-spinner-animation-child-6 { 50% { transform: translate(0, 325%); } } @keyframes breeding-rhombus-spinner-animation-child-7 { 50% { transform: translate(-325%, 325%); } } @keyframes breeding-rhombus-spinner-animation-child-8 { 50% { transform: translate(-325%, 0); } } @keyframes breeding-rhombus-spinner-animation-child-big { 50% { transform: scale(0.5); } } ================================================ FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { BreedingRhombusSpinnerComponent } from './breeding-rhombus-spinner.component'; describe('BreedingRhombusSpinnerComponent', () => { let component: BreedingRhombusSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ BreedingRhombusSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(BreedingRhombusSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.ts ================================================ import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-breeding-rhombus-spinner', template: ` `, styleUrls: ['./breeding-rhombus-spinner.component.css'] }) export class BreedingRhombusSpinnerComponent implements OnInit { constructor() { } @Input() size = 150; @Input() animationDuration = 2000; @Input() color = '#fff'; animationBaseName = 'breeding-rhombus-spinner-animation-child'; rhombusesNum = 8; get spinnerStyle() { return { height: `${this.size}px`, width: `${this.size}px` }; } get rhombusStyle() { return { height: `${this.size / 7.5}px`, width: `${this.size / 7.5}px`, animationDuration: `${this.animationDuration}`, top: `${this.size / 2.3077}px`, left: `${this.size / 23077}px`, backgroundColor: this.color }; } get rhombusesStyles() { const rhombusesStyles = []; const delayModifier = this.animationDuration * 0.05; for (let i = 1; i <= this.rhombusesNum; i++) { rhombusesStyles.push({ ...this.rhombusStyle, animationDelay: `${delayModifier * (i + 1)}ms` }); } return rhombusesStyles; } get bigRhombusStyle() { return { height: `${this.size / 3}px`, width: `${this.size / 3}px`, animationDuration: `${this.animationDuration}`, top: `${this.size / 3}px`, left: `${this.size / 3}px`, backgroundColor: this.color }; } childClassString(index) { return `child-${index + 1}`; } ngOnInit() { } } ================================================ FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {BreedingRhombusSpinnerComponent} from './breeding-rhombus-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [BreedingRhombusSpinnerComponent], declarations: [BreedingRhombusSpinnerComponent], providers: [], }) export class BreedingRhombusSpinnerModule { } ================================================ FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.css ================================================ .circles-to-rhombuses-spinner, .circles-to-rhombuses-spinner * { box-sizing: border-box; } .circles-to-rhombuses-spinner { height: 15px; width: calc( (15px + 15px * 1.125) * 3); display: flex; align-items: center; justify-content: center } .circles-to-rhombuses-spinner .circle { height: 15px; width: 15px; margin-left: calc(15px * 1.125); transform: rotate(45deg); border-radius: 10%; border: 3px solid #ff1d5e; overflow: hidden; background: transparent; animation: circles-to-rhombuses-animation 1200ms linear infinite; } .circles-to-rhombuses-spinner .circle:nth-child(1) { animation-delay: calc(150ms * 1); margin-left: 0 } .circles-to-rhombuses-spinner .circle:nth-child(2) { animation-delay: calc(150ms * 2); } .circles-to-rhombuses-spinner .circle:nth-child(3) { animation-delay: calc(150ms * 3); } @keyframes circles-to-rhombuses-animation { 0% { border-radius: 10%; } 17.5% { border-radius: 10%; } 50% { border-radius: 100%; } 93.5% { border-radius: 10%; } 100% { border-radius: 10%; } } @keyframes circles-to-rhombuses-background-animation { 50% { opacity: 0.4; } } ================================================ FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { CirclesToRhumbusesSpinnerComponent } from './circles-to-rhumbuses-spinner.component'; describe('CirclesToRhumbusesSpinnerComponent', () => { let component: CirclesToRhumbusesSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ CirclesToRhumbusesSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(CirclesToRhumbusesSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-circles-to-rhumbuses-spinner', template: ` `, styleUrls: ['./circles-to-rhumbuses-spinner.component.css'] }) export class CirclesToRhumbusesSpinnerComponent implements OnInit { constructor() { } @Input() circleSize = 15; @Input() circlesNum = 3; @Input() animationDuration = 1200; @Input() color = '#fff'; get circleMarginLeft() { return this.circleSize * 1.125; } get spinnerStyle() { return { height: `${this.circleSize}px`, width: `${(this.circleSize + this.circleMarginLeft) * this.circlesNum}px` }; } get circleStyle() { return { borderColor: this.color, animationDuration: `${this.animationDuration}ms`, height: `${this.circleSize}px`, width: `${this.circleSize}px`, marginLeft: `${this.circleMarginLeft}px` }; } get circlesStyles() { const circlesStyles = []; const delay = 150; for (let i = 1; i <= this.circlesNum; i++) { const style = { ...this.circleStyle, animationDelay: `${i * delay}ms` }; circlesStyles.push(style); } return circlesStyles; } ngOnInit() { } } ================================================ FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {CirclesToRhumbusesSpinnerComponent} from './circles-to-rhumbuses-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [CirclesToRhumbusesSpinnerComponent], declarations: [CirclesToRhumbusesSpinnerComponent], providers: [], }) export class CirclesToRhumbusesSpinnerModule { } ================================================ FILE: src/app/fingerprint-spinner/fingerprint-spinner.component.css ================================================ .fingerprint-spinner, .fingerprint-spinner * { box-sizing: border-box; } .fingerprint-spinner { height: 64px; width: 64px; padding: 2px; overflow: hidden; position: relative; } .fingerprint-spinner .spinner-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; border-top-color: #ff1d5e; animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.680, -0.750, 0.265, 1.750) infinite forwards; margin: auto; bottom: 0; left: 0; right: 0; top: 0; } .fingerprint-spinner .spinner-ring:nth-child(1) { height: calc(60px / 9 + 0 * 60px / 9); width: calc(60px / 9 + 0 * 60px / 9); animation-delay: calc(50ms * 1); } .fingerprint-spinner .spinner-ring:nth-child(2) { height: calc(60px / 9 + 1 * 60px / 9); width: calc(60px / 9 + 1 * 60px / 9); animation-delay: calc(50ms * 2); } .fingerprint-spinner .spinner-ring:nth-child(3) { height: calc(60px / 9 + 2 * 60px / 9); width: calc(60px / 9 + 2 * 60px / 9); animation-delay: calc(50ms * 3); } .fingerprint-spinner .spinner-ring:nth-child(4) { height: calc(60px / 9 + 3 * 60px / 9); width: calc(60px / 9 + 3 * 60px / 9); animation-delay: calc(50ms * 4); } .fingerprint-spinner .spinner-ring:nth-child(5) { height: calc(60px / 9 + 4 * 60px / 9); width: calc(60px / 9 + 4 * 60px / 9); animation-delay: calc(50ms * 5); } .fingerprint-spinner .spinner-ring:nth-child(6) { height: calc(60px / 9 + 5 * 60px / 9); width: calc(60px / 9 + 5 * 60px / 9); animation-delay: calc(50ms * 6); } .fingerprint-spinner .spinner-ring:nth-child(7) { height: calc(60px / 9 + 6 * 60px / 9); width: calc(60px / 9 + 6 * 60px / 9); animation-delay: calc(50ms * 7); } .fingerprint-spinner .spinner-ring:nth-child(8) { height: calc(60px / 9 + 7 * 60px / 9); width: calc(60px / 9 + 7 * 60px / 9); animation-delay: calc(50ms * 8); } .fingerprint-spinner .spinner-ring:nth-child(9) { height: calc(60px / 9 + 8 * 60px / 9); width: calc(60px / 9 + 8 * 60px / 9); animation-delay: calc(50ms * 9); } @keyframes fingerprint-spinner-animation { 100% { transform: rotate( 360deg ); } } ================================================ FILE: src/app/fingerprint-spinner/fingerprint-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FingerprintSpinnerComponent } from './fingerprint-spinner.component'; describe('FingerprintSpinnerComponent', () => { let component: FingerprintSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ FingerprintSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(FingerprintSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/fingerprint-spinner/fingerprint-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-fingerprint-spinner', template: ` `, styleUrls: ['./fingerprint-spinner.component.css'] }) export class FingerprintSpinnerComponent implements OnInit { constructor() { } @Input() size = 60; @Input() animationDuration = 1500; @Input() color = '#fff'; ringsNum = 9; containerPadding = 2; get outerRingSize(): number { return this.size - this.containerPadding * 2; } get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px`, padding: `${this.containerPadding}px` }; } get ringStyle(): object { return { borderTopColor: this.color, animationDuration: `${this.animationDuration}ms` }; } get ringsStyles(): object { const ringsStyles = []; const ringBase = this.outerRingSize / (this.ringsNum); const ringInc = ringBase; for (let i = 1; i <= this.ringsNum; i++) { ringsStyles.push({ ...this.ringStyle, animationDelay: `${i * 50}ms`, height: `${ringBase + (i + 1) * ringInc}px`, width: `${ringBase + (i + 1) * ringInc}px`, }); } return ringsStyles; } ngOnInit() { } } ================================================ FILE: src/app/fingerprint-spinner/fingerprint-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {FingerprintSpinnerComponent} from './fingerprint-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [FingerprintSpinnerComponent], declarations: [FingerprintSpinnerComponent], providers: [], }) export class FingerprintSpinnerModule { } ================================================ FILE: src/app/flower-spinner/flower-spinner.component.css ================================================ .flower-spinner, .flower-spinner * { box-sizing: border-box; } .flower-spinner { height: 70px; width: 70px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .flower-spinner .dots-container { height: calc(70px / 7); width: calc(70px / 7); } .flower-spinner .smaller-dot { background: #ff1d5e; height: 100%; width: 100%; border-radius: 50%; animation: flower-spinner-smaller-dot-animation 2.5s 0s infinite both; } .flower-spinner .bigger-dot { background: #ff1d5e; height: 100%; width: 100%; padding: 10%; border-radius: 50%; animation: flower-spinner-bigger-dot-animation 2.5s 0s infinite both; } @keyframes flower-spinner-bigger-dot-animation { 0%, 100% { box-shadow: rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0; } 50% { transform: rotate(180deg); } 25%, 75% { box-shadow: rgb(255, 29, 94) 26px 0 0, rgb(255, 29, 94) -26px 0 0, rgb(255, 29, 94) 0 26px 0, rgb(255, 29, 94) 0 -26px 0, rgb(255, 29, 94) 19px -19px 0, rgb(255, 29, 94) 19px 19px 0, rgb(255, 29, 94) -19px -19px 0, rgb(255, 29, 94) -19px 19px 0; } 100% { transform: rotate(360deg); box-shadow: rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0; } } @keyframes flower-spinner-smaller-dot-animation { 0%, 100% { box-shadow: rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0; } 25%, 75% { box-shadow: rgb(255, 29, 94) 14px 0 0, rgb(255, 29, 94) -14px 0 0, rgb(255, 29, 94) 0 14px 0, rgb(255, 29, 94) 0 -14px 0, rgb(255, 29, 94) 10px -10px 0, rgb(255, 29, 94) 10px 10px 0, rgb(255, 29, 94) -10px -10px 0, rgb(255, 29, 94) -10px 10px 0; } 100% { box-shadow: rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0, rgb(255, 29, 94) 0 0 0; } } ================================================ FILE: src/app/flower-spinner/flower-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FlowerSpinnerComponent } from './flower-spinner.component'; describe('FlowerSpinnerComponent', () => { let component: FlowerSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ FlowerSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(FlowerSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/flower-spinner/flower-spinner.component.ts ================================================ import { Component, Input, OnChanges, OnInit } from '@angular/core'; @Component({ selector: 'app-flower-spinner', template: ` `, styleUrls: ['./flower-spinner.component.css'] }) export class FlowerSpinnerComponent implements OnInit, OnChanges { constructor() { } @Input() size = 70; @Input() animationDuration = 2500; @Input() color = '#fff'; smallerDotAnimationBaseName = 'flower-spinner-smaller-dot-animation'; biggerDotAnimationBaseName = 'flower-spinner-bigger-dot-animation'; currentSmallerDotAnimationBaseName = ''; currentBiggerDotAnimationBaseName = ''; get dotSize(): number { return this.size / 7; } get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px`, }; } get dotsContainerStyle(): object { return { width: `${this.color}px`, height: `${this.color}px`, }; } get smallerDotStyle(): object { return { background: this.color, animationDuration: `${this.animationDuration}ms`, animationName: this.currentSmallerDotAnimationBaseName }; } get biggerDotStyle(): object { return { background: this.color, animationDuration: `${this.animationDuration}ms`, animationName: this.currentBiggerDotAnimationBaseName }; } ngOnInit() { } ngOnChanges() { } } ================================================ FILE: src/app/flower-spinner/flower-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {FlowerSpinnerComponent} from './flower-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [FlowerSpinnerComponent], declarations: [FlowerSpinnerComponent], providers: [], }) export class FlowerSpinnerModule { } ================================================ FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.css ================================================ .fulfilling-bouncing-circle-spinner, .fulfilling-bouncing-circle-spinner * { box-sizing: border-box; } .fulfilling-bouncing-circle-spinner { height: 60px; width: 60px; position: relative; animation: fulfilling-bouncing-circle-spinner-animation infinite 4000ms ease; } .fulfilling-bouncing-circle-spinner .orbit { height: 60px; width: 60px; position: absolute; top: 0; left: 0; border-radius: 50%; border: calc(60px * 0.03) solid #ff1d5e; animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 4000ms ease; } .fulfilling-bouncing-circle-spinner .circle { height: 60px; width: 60px; color: #ff1d5e; display: block; border-radius: 50%; position: relative; border: calc(60px * 0.1) solid #ff1d5e; animation: fulfilling-bouncing-circle-spinner-circle-animation infinite 4000ms ease; transform: rotate(0deg) scale(1); } @keyframes fulfilling-bouncing-circle-spinner-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fulfilling-bouncing-circle-spinner-orbit-animation { 0% { transform: scale(1); } 50% { transform: scale(1); } 62.5% { transform: scale(0.8); } 75% { transform: scale(1); } 87.5% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes fulfilling-bouncing-circle-spinner-circle-animation { 0% { transform: scale(1); border-color: transparent; border-top-color: inherit; } 16.7% { border-color: transparent; border-top-color: initial; border-right-color: initial; } 33.4% { border-color: transparent; border-top-color: inherit; border-right-color: inherit; border-bottom-color: inherit; } 50% { border-color: inherit; transform: scale(1); } 62.5% { border-color: inherit; transform: scale(1.4); } 75% { border-color: inherit; transform: scale(1); opacity: 1; } 87.5% { border-color: inherit; transform: scale(1.4); } 100% { border-color: transparent; border-top-color: inherit; transform: scale(1); } } ================================================ FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FulfillingBouncingCircleSpinnerComponent } from './fulfilling-bouncing-circle-spinner.component'; describe('FulfillingBouncingCircleSpinnerComponent', () => { let component: FulfillingBouncingCircleSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ FulfillingBouncingCircleSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(FulfillingBouncingCircleSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-fulfilling-bouncing-circle-spinner', template: ` `, styleUrls: ['./fulfilling-bouncing-circle-spinner.component.css'] }) export class FulfillingBouncingCircleSpinnerComponent implements OnInit { constructor() { } @Input() size = 60; @Input() animationDuration = 4000; @Input() color = '#fff'; get spinnerStyle() { return { height: `${this.size}px`, width: `${this.size}px`, animationDuration: `${this.animationDuration}ms` }; } get orbitStyle() { return { height: `${this.size}px`, width: `${this.size}px`, borderColor: this.color, borderWidth: `${this.size * 0.03}px`, animationDuration: `${this.animationDuration}ms` }; } get circleStyle() { return { height: `${this.size}px`, width: `${this.size}px`, borderColor: this.color, color: this.color, borderWidth: `${this.size * 0.1}px`, animationDuration: `${this.animationDuration}ms` }; } ngOnInit() { } } ================================================ FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {FulfillingBouncingCircleSpinnerComponent} from './fulfilling-bouncing-circle-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [FulfillingBouncingCircleSpinnerComponent], declarations: [FulfillingBouncingCircleSpinnerComponent], providers: [], }) export class FulfillingBouncingCircleSpinnerModule { } ================================================ FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.css ================================================ .fulfilling-square-spinner, .fulfilling-square-spinner * { box-sizing: border-box; } .fulfilling-square-spinner { height: 50px; width: 50px; position: relative; border: 4px solid #ff1d5e; animation: fulfilling-square-spinner-animation 4s infinite ease; } .fulfilling-square-spinner .spinner-inner { vertical-align: top; display: inline-block; background-color: #ff1d5e; width: 100%; opacity: 1; animation: fulfilling-square-spinner-inner-animation 4s infinite ease-in; } @keyframes fulfilling-square-spinner-animation { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes fulfilling-square-spinner-inner-animation { 0% { height: 0; } 25% { height: 0; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0; } } ================================================ FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FulfillingSquareSpinnerComponent } from './fulfilling-square-spinner.component'; describe('FulfillingSquareSpinnerComponent', () => { let component: FulfillingSquareSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ FulfillingSquareSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(FulfillingSquareSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-fulfilling-square-spinner', template: ` `, styleUrls: ['./fulfilling-square-spinner.component.css'] }) export class FulfillingSquareSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 4000; @Input() size = 50; @Input() color = '#fff'; get spinnerStyle() { return { height: `${this.size}px`, width: `${this.size}px`, borderColor: this.color, }; } get spinnerInnerStyle() { return { backgroundColor: this.color }; } ngOnInit() { } } ================================================ FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {FulfillingSquareSpinnerComponent} from './fulfilling-square-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [FulfillingSquareSpinnerComponent], declarations: [FulfillingSquareSpinnerComponent], providers: [], }) export class FulfillingSquareSpinnerModule { } ================================================ FILE: src/app/half-circle-spinner/half-circle-spinner.component.css ================================================ .half-circle-spinner, .half-circle-spinner * { box-sizing: border-box; } .half-circle-spinner { width: 60px; height: 60px; border-radius: 100%; position: relative; } .half-circle-spinner .circle { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 100%; border: calc(60px / 10) solid transparent; } .half-circle-spinner .circle.circle-1 { border-top-color: #ff1d5e; animation: half-circle-spinner-animation 1s infinite; } .half-circle-spinner .circle.circle-2 { border-bottom-color: #ff1d5e; animation: half-circle-spinner-animation 1s infinite alternate; } @keyframes half-circle-spinner-animation { 0% { transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } ================================================ FILE: src/app/half-circle-spinner/half-circle-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HalfCircleSpinnerComponent } from './half-circle-spinner.component'; describe('HalfCircleSpinnerComponent', () => { let component: HalfCircleSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ HalfCircleSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(HalfCircleSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/half-circle-spinner/half-circle-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-half-circle-spinner', template: ` `, styleUrls: ['./half-circle-spinner.component.css'] }) export class HalfCircleSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1000; @Input() size = 60; @Input() color = '#fff'; get spinnerStyle() { return { height: `${this.size}px`, width: `${this.size}px`, }; } get circleStyle() { return { borderWidth: `${this.size / 10}px`, animationDuration: `${this.animationDuration}ms` }; } get circle1Style() { return { ...this.circleStyle, borderTopColor: this.color }; } get circle2Style() { return { ...this.circleStyle, borderBottomColor: this.color }; } ngOnInit() { } } ================================================ FILE: src/app/half-circle-spinner/half-circle-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {HalfCircleSpinnerComponent} from './half-circle-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [HalfCircleSpinnerComponent], declarations: [HalfCircleSpinnerComponent], providers: [], }) export class HalfCircleSpinnerModule { } ================================================ FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.component.css ================================================ .hollow-dots-spinner, .hollow-dots-spinner * { box-sizing: border-box; } .hollow-dots-spinner { height: 15px; width: calc(30px * 3); } .hollow-dots-spinner .dot { width: 15px; height: 15px; margin: 0 calc(15px / 2); border: calc(15px / 5) solid #ff1d5e; border-radius: 50%; float: left; transform: scale(0); animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms; } .hollow-dots-spinner .dot:nth-child(1) { animation-delay: calc(300ms * 1); } .hollow-dots-spinner .dot:nth-child(2) { animation-delay: calc(300ms * 2); } .hollow-dots-spinner .dot:nth-child(3) { animation-delay: calc(300ms * 3); } @keyframes hollow-dots-spinner-animation { 50% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } } ================================================ FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { HollowDotsSpinnerComponent } from './hollow-dots-spinner.component'; describe('HollowDotsSpinnerComponent', () => { let component: HollowDotsSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ HollowDotsSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(HollowDotsSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-hollow-dots-spinner', template: ` `, styleUrls: ['./hollow-dots-spinner.component.css'] }) export class HollowDotsSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1000; @Input() dotSize = 15; @Input() dotsNum = 3; @Input() color = '#fff'; get horizontalMargin(): number { return this.dotSize / 2; } get spinnerStyle(): object { return { height: `${this.dotSize}px`, width: `${this.dotSize}px`, }; } get dotStyle(): object { return { width: `${this.dotSize}px`, height: `${this.dotSize}px`, margin: `0 ${this.horizontalMargin}px`, borderWidth: `${this.dotSize / 5}px`, borderColor: this.color, animationDuration: `${this.animationDuration}ms` }; } get dotsStyles(): object { const dotsStyles = []; const delayModifier = 0.3; const basicDelay = 1000; for (let i = 1; i <= this.dotsNum; i++) { const style = { ...this.dotStyle, animationDelay: `${basicDelay * i * delayModifier}ms` }; dotsStyles.push(style); } return dotsStyles; } ngOnInit() { } } ================================================ FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {HollowDotsSpinnerComponent} from './hollow-dots-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [HollowDotsSpinnerComponent], declarations: [HollowDotsSpinnerComponent], providers: [], }) export class HollowDotsSpinnerModule { } ================================================ FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.css ================================================ .intersecting-circles-spinner, .intersecting-circles-spinner * { box-sizing: border-box; } .intersecting-circles-spinner { height: 70px; width: 70px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } .intersecting-circles-spinner .spinnerBlock { animation: intersecting-circles-spinners-animation 1200ms linear infinite; transform-origin: center; display: block; height: 35px; width: 35px; } .intersecting-circles-spinner .circle { display: block; border: 2px solid #ff1d5e; border-radius: 50%; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .intersecting-circles-spinner .circle:nth-child(1) { left: 0; top: 0; } .intersecting-circles-spinner .circle:nth-child(2) { left: calc(35px * -0.36); top: calc(35px * 0.2); } .intersecting-circles-spinner .circle:nth-child(3) { left: calc(35px * -0.36); top: calc(35px * -0.2); } .intersecting-circles-spinner .circle:nth-child(4) { left: 0; top: calc(35px * -0.36); } .intersecting-circles-spinner .circle:nth-child(5) { left: calc(35px * 0.36); top: calc(35px * -0.2); } .intersecting-circles-spinner .circle:nth-child(6) { left: calc(35px * 0.36); top: calc(35px * 0.2); } .intersecting-circles-spinner .circle:nth-child(7) { left: 0; top: calc(35px * 0.36); } @keyframes intersecting-circles-spinners-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ================================================ FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IntersectingCirclesSpinnerComponent } from './intersecting-circles-spinner.component'; describe('IntersectingCirclesSpinnerComponent', () => { let component: IntersectingCirclesSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ IntersectingCirclesSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(IntersectingCirclesSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-intersecting-circles-spinner', template: ` `, styleUrls: ['./intersecting-circles-spinner.component.css'] }) export class IntersectingCirclesSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1200; @Input() size = 70; @Input() color = '#fff'; get circleSize(): number { return this.size / 2; } get spinnerStyle(): object { return { width: `${this.size}px`, height: `${this.size}px` }; } get spinnerBlockStyle(): object { return { animationDuration: `${this.animationDuration}ms`, width: `${this.circleSize}px`, height: `${this.circleSize}px` }; } get circleStyle(): object { return { borderColor: this.color }; } get circleStyles(): object { const circlesPositions = [ {top: 0, left: 0}, {left: `${this.circleSize * -0.36}px`, top: `${this.circleSize * 0.2}px`}, {left: `${this.circleSize * -0.36}px`, top: `${this.circleSize * -0.2}px`}, {left: 0, top: `${this.circleSize * -0.36}px`}, {left: `${this.circleSize * 0.36}px`, top: `${this.circleSize * -0.2}px`}, {left: `${this.circleSize * 0.36}px`, top: `${this.circleSize * 0.2}px`}, {left: 0, top: `${this.circleSize * 0.36}px`} ]; return circlesPositions.map((cp) => { return {cp, ...this.circleStyle}; }); } ngOnInit() { } } ================================================ FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {IntersectingCirclesSpinnerComponent} from './intersecting-circles-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [IntersectingCirclesSpinnerComponent], declarations: [IntersectingCirclesSpinnerComponent], providers: [], }) export class IntersectingCirclesSpinnerModule { } ================================================ FILE: src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.css ================================================ .looping-rhombuses-spinner, .looping-rhombuses-spinner * { box-sizing: border-box; } .looping-rhombuses-spinner { width: calc(15px * 4); height: 15px; position: relative; } .looping-rhombuses-spinner .rhombus { height: 15px; width: 15px; background: #ff1d5e; left: calc(15px * 4); position: absolute; margin: 0 auto; border-radius: 2px; transform: translateY(0) rotate(45deg) scale(0); animation: looping-rhombuses-spinner-animation 2500ms linear infinite; } .looping-rhombuses-spinner .rhombus:nth-child(1) { animation-delay: calc(2500ms * 1 / -1.5); } .looping-rhombuses-spinner .rhombus:nth-child(2) { animation-delay: calc(2500ms * 2 / -1.5); } .looping-rhombuses-spinner .rhombus:nth-child(3) { animation-delay: calc(2500ms * 3 / -1.5); } @keyframes looping-rhombuses-spinner-animation { 0% { transform: translateX(0) rotate(45deg) scale(0); } 50% { transform: translateX(-233%) rotate(45deg) scale(1); } 100% { transform: translateX(-466%) rotate(45deg) scale(0); } } ================================================ FILE: src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { LoopingRhombusesSpinnerComponent } from './looping-rhumbuses-spinner.component'; describe('LoopingRhombusesSpinnerComponent', () => { let component: LoopingRhombusesSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ LoopingRhombusesSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(LoopingRhombusesSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-looping-rhombuses-spinner', template: ` `, styleUrls: ['./looping-rhombuses-spinner.component.css'] }) export class LoopingRhumbusesSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 2500; @Input() rhombusSize = 15; @Input() color = '#fff'; rhombusesNum = 3; get spinnerStyle(): object { return { height: `${this.rhombusSize}px`, width: `${this.rhombusSize * 4}px` }; } get rhombusStyle(): object { return { height: `${this.rhombusSize}px`, width: `${this.rhombusSize}px`, background: this.color, animationDuration: `${this.animationDuration}ms`, left: `${this.rhombusSize * 4}px` }; } get rhombusesStyles(): object { const rhombusesStyles = []; const delay = -this.animationDuration / 1.5; for (let i = 1; i <= this.rhombusesNum; i++) { const style = Object.assign({ animationDelay: `${i * delay}ms` }, this.rhombusStyle); rhombusesStyles.push(style); } return rhombusesStyles; } ngOnInit() { } } ================================================ FILE: src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {LoopingRhumbusesSpinnerComponent} from './looping-rhumbuses-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [LoopingRhumbusesSpinnerComponent], declarations: [LoopingRhumbusesSpinnerComponent], providers: [], }) export class LoopingRhumbusesSpinnerModule { } ================================================ FILE: src/app/orbit-spinner/orbit-spinner.component.css ================================================ .orbit-spinner, .orbit-spinner * { box-sizing: border-box; } .orbit-spinner { height: 55px; width: 55px; border-radius: 50%; perspective: 800px; } .orbit-spinner .orbit { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .orbit-spinner .orbit:nth-child(1) { left: 0; top: 0; animation: orbit-spinner-orbit-one-animation 1200ms linear infinite; border-bottom: 3px solid #ff1d5e; } .orbit-spinner .orbit:nth-child(2) { right: 0; top: 0; animation: orbit-spinner-orbit-two-animation 1200ms linear infinite; border-right: 3px solid #ff1d5e; } .orbit-spinner .orbit:nth-child(3) { right: 0; bottom: 0; animation: orbit-spinner-orbit-three-animation 1200ms linear infinite; border-top: 3px solid #ff1d5e; } @keyframes orbit-spinner-orbit-one-animation { 0%{ transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-two-animation { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-three-animation { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } ================================================ FILE: src/app/orbit-spinner/orbit-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { OrbitSpinnerComponent } from './orbit-spinner.component'; describe('OrbitSpinnerComponent', () => { let component: OrbitSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ OrbitSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(OrbitSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/orbit-spinner/orbit-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-orbit-spinner', template: ` `, styleUrls: ['./orbit-spinner.component.css'] }) export class OrbitSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1000; @Input() size = 50; @Input() color = '#fff'; get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px` }; } get orbitStyle(): object { return { borderColor: this.color, animationDuration: `${this.animationDuration}ms` }; } ngOnInit() { } } ================================================ FILE: src/app/orbit-spinner/orbit-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {OrbitSpinnerComponent} from './orbit-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [OrbitSpinnerComponent], declarations: [OrbitSpinnerComponent], providers: [], }) export class OrbitSpinnerModule { } ================================================ FILE: src/app/pixel-spinner/pixel-spinner.component.css ================================================ .pixel-spinner, .pixel-spinner * { box-sizing: border-box; } .pixel-spinner { height: 70px; width: 70px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .pixel-spinner .pixel-spinner-inner { width: calc(70px / 7); height: calc(70px / 7); background-color: #ff1d5e; color: #ff1d5e; box-shadow: 15px 15px 0 0, -15px -15px 0 0, 15px -15px 0 0, -15px 15px 0 0, 0 15px 0 0, 15px 0 0 0, -15px 0 0 0, 0 -15px 0 0; animation: pixel-spinner-animation 2000ms linear infinite; } @keyframes pixel-spinner-animation { 50% { box-shadow: 20px 20px 0 0, -20px -20px 0 0, 20px -20px 0 0, -20px 20px 0 0, 0 10px 0 0, 10px 0 0 0, -10px 0 0 0, 0 -10px 0 0; } 75% { box-shadow: 20px 20px 0 0, -20px -20px 0 0, 20px -20px 0 0, -20px 20px 0 0, 0 10px 0 0, 10px 0 0 0, -10px 0 0 0, 0 -10px 0 0; } 100% { transform: rotate(360deg); } } ================================================ FILE: src/app/pixel-spinner/pixel-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { PixelSpinnerComponent } from './pixel-spinner.component'; describe('PixelSpinnerComponent', () => { let component: PixelSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ PixelSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(PixelSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/pixel-spinner/pixel-spinner.component.ts ================================================ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-pixel-spinner', template: ` `, styleUrls: ['./pixel-spinner.component.css'] }) export class PixelSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1000; @Input() size = 50; @Input() color = '#fff'; animationBaseName = 'pixel-spinner-animation'; currentAnimationName = ''; get pixelSize(): number { return this.size / 7; } get spinnerStyle(): object { return { width: `${this.size}px`, height: `${this.size}px` }; } get spinnerInnerStyle(): object { return { animationDuration: `${this.animationDuration}ms`, animationName: this.currentAnimationName, width: `${this.pixelSize}px`, height: `${this.pixelSize}px`, backgroundColor: this.color, color: this.color, boxShadow: ` ${this.pixelSize * 1.5}px ${this.pixelSize * 1.5}px 0 0, ${this.pixelSize * -1.5}px ${this.pixelSize * -1.5}px 0 0, ${this.pixelSize * 1.5}px ${this.pixelSize * -1.5}px 0 0, ${this.pixelSize * -1.5}px ${this.pixelSize * 1.5}px 0 0, 0 ${this.pixelSize * 1.5}px 0 0, ${this.pixelSize * 1.5}px 0 0 0, ${this.pixelSize * -1.5}px 0 0 0, 0 ${this.pixelSize * -1.5}px 0 0 ` }; } ngOnInit() { } } ================================================ FILE: src/app/pixel-spinner/pixel-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {PixelSpinnerComponent} from './pixel-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [PixelSpinnerComponent], declarations: [PixelSpinnerComponent], providers: [], }) export class PixelSpinnerModule { } ================================================ FILE: src/app/radar-spinner/radar-spinner.component.css ================================================ .radar-spinner, .radar-spinner * { box-sizing: border-box; } .radar-spinner { height: 60px; width: 60px; position: relative; } .radar-spinner .circle { position: absolute; height: 100%; width: 100%; top: 0; left: 0; animation: radar-spinner-animation 2s infinite; } .radar-spinner .circle:nth-child(1) { padding: calc(60px * 5 * 2 * 0 / 110); animation-delay: 300ms; } .radar-spinner .circle:nth-child(2) { padding: calc(60px * 5 * 2 * 1 / 110); animation-delay: 300ms; } .radar-spinner .circle:nth-child(3) { padding: calc(60px * 5 * 2 * 2 / 110); animation-delay: 300ms; } .radar-spinner .circle:nth-child(4) { padding: calc(60px * 5 * 2 * 3 / 110); animation-delay: 0ms; } .radar-spinner .circle-inner, .radar-spinner .circle-inner-container { height: 100%; width: 100%; border-radius: 50%; border: calc(60px * 5 / 110) solid transparent; } .radar-spinner .circle-inner { border-left-color: #ff1d5e; border-right-color: #ff1d5e; } @keyframes radar-spinner-animation { 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } ================================================ FILE: src/app/radar-spinner/radar-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RadarSpinnerComponent } from './radar-spinner.component'; describe('RadarSpinnerComponent', () => { let component: RadarSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ RadarSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(RadarSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/radar-spinner/radar-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-radar-spinner', template: ` `, styleUrls: ['./radar-spinner.component.css'] }) export class RadarSpinnerComponent implements OnInit { constructor() { } @Input() size = 110; @Input() animationDuration = 2000; @Input() color = '#fff'; private circlesNum = 4; get borderWidth(): number { return this.size * 5 / 110; } get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px` }; } get circleStyle(): object { return { animationDuration: `${this.animationDuration}ms` }; } get circleInnerContainerStyle(): object { return { borderWidth: `${this.borderWidth}px` }; } get circleInnerStyle(): object { return { borderLeftColor: this.color, borderRightColor: this.color, borderWidth: `${this.borderWidth}px` }; } get circlesStyles(): object { const circlesStyles = []; const delay = this.animationDuration * 0.15; for (let i = 0; i < this.circlesNum; i++) { circlesStyles.push(Object.assign({ padding: `${this.borderWidth * 2 * i}px`, animationDelay: `${i === this.circlesNum - 1 ? 0 : delay}ms` }, this.circleStyle)); } return circlesStyles; } ngOnInit() { } } ================================================ FILE: src/app/radar-spinner/radar-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {RadarSpinnerComponent} from './radar-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [RadarSpinnerComponent], declarations: [RadarSpinnerComponent], providers: [], }) export class RadarSpinnerModule { } ================================================ FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.component.css ================================================ .scaling-squares-spinner, .scaling-squares-spinner * { box-sizing: border-box; } .scaling-squares-spinner { height: 65px; width: 65px; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; animation: scaling-squares-animation 1250ms; animation-iteration-count: infinite; transform: rotate(0deg); } .scaling-squares-spinner .square { height: calc(65px * 0.25 / 1.3); width: calc(65px * 0.25 / 1.3); margin-right: auto; margin-left: auto; border: calc(65px * 0.04 / 1.3) solid #ff1d5e; position: absolute; animation-duration: 1250ms; animation-iteration-count: infinite; } .scaling-squares-spinner .square:nth-child(1) { animation-name: scaling-squares-spinner-animation-child-1; } .scaling-squares-spinner .square:nth-child(2) { animation-name: scaling-squares-spinner-animation-child-2; } .scaling-squares-spinner .square:nth-child(3) { animation-name: scaling-squares-spinner-animation-child-3; } .scaling-squares-spinner .square:nth-child(4) { animation-name: scaling-squares-spinner-animation-child-4; } @keyframes scaling-squares-animation { 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } } @keyframes scaling-squares-spinner-animation-child-1 { 50% { transform: translate(150%,150%) scale(2,2); } } @keyframes scaling-squares-spinner-animation-child-2 { 50% { transform: translate(-150%,150%) scale(2,2); } } @keyframes scaling-squares-spinner-animation-child-3 { 50% { transform: translate(-150%,-150%) scale(2,2); } } @keyframes scaling-squares-spinner-animation-child-4 { 50% { transform: translate(150%,-150%) scale(2,2); } } ================================================ FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ScalingSquaresSpinnerComponent } from './scaling-squares-spinner.component'; describe('ScalingSquaresSpinnerComponent', () => { let component: ScalingSquaresSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ScalingSquaresSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ScalingSquaresSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-scaling-squares-spinner', template: ` `, styleUrls: ['./scaling-squares-spinner.component.css'] }) export class ScalingSquaresSpinnerComponent implements OnInit { constructor() { } @Input() size = 65; @Input() color = '#fff'; @Input() animationDuration = 1250; squaresNum = 4; get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px`, animationDuration: `${this.animationDuration}ms` }; } get squareStyle(): object { return { height: `${this.size * 0.25 / 1.3}px`, width: `${this.size * 0.25 / 1.3}px`, animationDuration: `${this.animationDuration}ms`, borderWidth: `${this.size * 0.04 / 1.3}px`, borderColor: this.color }; } get squaresStyles(): object { const squaresStyles = []; for (let i = 1; i <= this.squaresNum; i++) { squaresStyles.push({...this.squareStyle}); } return squaresStyles; } childClass(i) { return `square-${i + 1}`; } ngOnInit() { } } ================================================ FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {ScalingSquaresSpinnerComponent} from './scaling-squares-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [ScalingSquaresSpinnerComponent], declarations: [ScalingSquaresSpinnerComponent], providers: [], }) export class ScalingSquaresSpinnerModule { } ================================================ FILE: src/app/self-building-square-spinner/self-building-square-spinner.component.css ================================================ .self-building-square-spinner, .self-building-square-spinner * { box-sizing: border-box; } .self-building-square-spinner { height: 40px; width: 40px; top: calc( -10px * 2 / 3); } .self-building-square-spinner .square { height: 10px; width: 10px; top: calc( -10px * 2 / 3); margin-right: calc(10px / 3); margin-top: calc(10px / 3); background: #ff1d5e; float: left; position:relative; opacity: 0; animation: self-building-square-spinner 6s infinite; } .self-building-square-spinner .square:nth-child(1) { animation-delay: calc(300ms * 6); } .self-building-square-spinner .square:nth-child(2) { animation-delay: calc(300ms * 7); } .self-building-square-spinner .square:nth-child(3) { animation-delay: calc(300ms * 8); } .self-building-square-spinner .square:nth-child(4) { animation-delay: calc(300ms * 3); } .self-building-square-spinner .square:nth-child(5) { animation-delay: calc(300ms * 4); } .self-building-square-spinner .square:nth-child(6) { animation-delay: calc(300ms * 5); } .self-building-square-spinner .square:nth-child(7) { animation-delay: calc(300ms * 0); } .self-building-square-spinner .square:nth-child(8) { animation-delay: calc(300ms * 1); } .self-building-square-spinner .square:nth-child(9) { animation-delay: calc(300ms * 2); } .self-building-square-spinner .clear{ clear: both; } @keyframes self-building-square-spinner { 0% { opacity: 0; } 5% { opacity: 1; top: 0; } 50.9% { opacity: 1; top: 0; } 55.9% { opacity: 0; top: inherit; } } ================================================ FILE: src/app/self-building-square-spinner/self-building-square-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SelfBuildingSquareSpinnerComponent } from './self-building-square-spinner.component'; describe('SelfBuildingSquareSpinnerComponent', () => { let component: SelfBuildingSquareSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SelfBuildingSquareSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(SelfBuildingSquareSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/self-building-square-spinner/self-building-square-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-self-building-square-spinner', template: ` `, styleUrls: ['./self-building-square-spinner.component.css'] }) export class SelfBuildingSquareSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 6000; @Input() size = 40; @Input() color = '#fff'; squaresNum = 9; get squareSize(): number { return this.size / 4; } get initialTopPosition(): number { return -this.squareSize * 2 / 3; } get spinnerStyle(): object { return { top: `${-this.initialTopPosition}px`, height: `${this.size}px`, width: `${this.size}px` }; } get squareStyle(): object { return { height: `${this.squareSize}px`, width: `${this.squareSize}px`, top: `${this.initialTopPosition}px`, marginRight: `${this.squareSize / 3}px`, marginTop: `${this.squareSize / 3}px`, animationDuration: `${this.animationDuration}ms`, background: this.color }; } get squaresStyles(): object { const squaresStyles = []; const delaysMultipliers = [6, 7, 8, 3, 4, 5, 0, 1, 2]; const delayModifier = this.animationDuration * 0.05; for (let i = 0; i < this.squaresNum; i++) { squaresStyles.push({ animationDelay: `${delayModifier * delaysMultipliers[i]}ms`, ...this.squareStyle }); } return squaresStyles; } ngOnInit() { } } ================================================ FILE: src/app/self-building-square-spinner/self-building-square-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {SelfBuildingSquareSpinnerComponent} from './self-building-square-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [SelfBuildingSquareSpinnerComponent], declarations: [SelfBuildingSquareSpinnerComponent], providers: [], }) export class SelfBuildingSquareSpinnerModule { } ================================================ FILE: src/app/semipolar-spinner/semipolar-spinner.component.css ================================================ .semipolar-spinner, .semipolar-spinner * { box-sizing: border-box; } .semipolar-spinner { height: 65px; width: 65px; position: relative; } .semipolar-spinner .ring { border-radius: 50%; position: absolute; border: calc(65px * 0.05) solid transparent; border-top-color: #ff1d5e; border-left-color: #ff1d5e; animation: semipolar-spinner-animation 2s infinite; } .semipolar-spinner .ring:nth-child(1) { height: calc(65px - 65px * 0.2 * 0); width: calc(65px - 65px * 0.2 * 0); top: calc(65px * 0.1 * 0); left: calc(65px * 0.1 * 0); animation-delay: calc(2000ms * 0.1 * 4); z-index: 5; } .semipolar-spinner .ring:nth-child(2) { height: calc(65px - 65px * 0.2 * 1); width: calc(65px - 65px * 0.2 * 1); top: calc(65px * 0.1 * 1); left: calc(65px * 0.1 * 1); animation-delay: calc(2000ms * 0.1 * 3); z-index: 4; } .semipolar-spinner .ring:nth-child(3) { height: calc(65px - 65px * 0.2 * 2); width: calc(65px - 65px * 0.2 * 2); top: calc(65px * 0.1 * 2); left: calc(65px * 0.1 * 2); animation-delay: calc(2000ms * 0.1 * 2); z-index: 3; } .semipolar-spinner .ring:nth-child(4) { height: calc(65px - 65px * 0.2 * 3); width: calc(65px - 65px * 0.2 * 3); top: calc(65px * 0.1 * 3); left: calc(65px * 0.1 * 3); animation-delay: calc(2000ms * 0.1 * 1); z-index: 2; } .semipolar-spinner .ring:nth-child(5) { height: calc(65px - 65px * 0.2 * 4); width: calc(65px - 65px * 0.2 * 4); top: calc(65px * 0.1 * 4); left: calc(65px * 0.1 * 4); animation-delay: calc(2000ms * 0.1 * 0); z-index: 1; } @keyframes semipolar-spinner-animation { 50% { transform: rotate(360deg) scale(0.7); } } ================================================ FILE: src/app/semipolar-spinner/semipolar-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SemipolarSpinnerComponent } from './semipolar-spinner.component'; describe('SemipolarSpinnerComponent', () => { let component: SemipolarSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SemipolarSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(SemipolarSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/semipolar-spinner/semipolar-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-semipolar-spinner', template: ` `, styleUrls: ['./semipolar-spinner.component.css'] }) export class SemipolarSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 2000; @Input() size = 65; @Input() color = '#fff'; ringsNum = 5; get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px` }; } get ringStyle(): object { return { animationDuration: `${this.animationDuration}ms`, borderTopColor: this.color, borderLeftColor: this.color }; } get ringsStyles(): object { const ringsStyles = []; const delayModifier = 0.1; const ringWidth = this.size * 0.05; const positionIncrement = ringWidth * 2; const sizeDecrement = this.size * 0.2; for (let i = 0; i < this.ringsNum; i++) { const computedSize = `${this.size - sizeDecrement * i}px`; const computedPosition = `${positionIncrement * i}px`; const style = { animationDelay: `${this.animationDuration * delayModifier * (this.ringsNum - i - 1)}ms`, height: computedSize, width: computedSize, left: computedPosition, top: computedPosition, borderWidth: `${ringWidth}px`, ...this.ringStyle }; ringsStyles.push(style); } return ringsStyles; } ngOnInit() { } } ================================================ FILE: src/app/semipolar-spinner/semipolar-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {SemipolarSpinnerComponent} from './semipolar-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [SemipolarSpinnerComponent], declarations: [SemipolarSpinnerComponent], providers: [], }) export class SemipolarSpinnerModule { } ================================================ FILE: src/app/services/utils.service.spec.ts ================================================ import { TestBed, inject } from '@angular/core/testing'; import { UtilsService } from './utils.service'; describe('UtilsService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [UtilsService] }); }); it('should be created', inject([UtilsService], (service: UtilsService) => { expect(service).toBeTruthy(); })); }); ================================================ FILE: src/app/services/utils.service.ts ================================================ import { Injectable } from '@angular/core'; @Injectable() export class UtilsService { constructor() { } } ================================================ FILE: src/app/spring-spinner/spring-spinner.component.css ================================================ .spring-spinner, .spring-spinner * { box-sizing: border-box; } .spring-spinner { height: 60px; width: 60px; } .spring-spinner .spring-spinner-part { overflow: hidden; height: calc(60px / 2); width: 60px; } .spring-spinner .spring-spinner-part.bottom { transform: rotate(180deg) scale(-1, 1); } .spring-spinner .spring-spinner-rotator { width: 60px; height: 60px; border: calc(60px / 7) solid transparent; border-right-color: #ff1d5e; border-top-color: #ff1d5e; border-radius: 50%; box-sizing: border-box; animation: spring-spinner-animation 3s ease-in-out infinite; transform: rotate(-200deg); } @keyframes spring-spinner-animation { 0% { border-width: calc(60px / 7); } 25% { border-width: calc(60px / 23.33); } 50% { transform: rotate(115deg); border-width: calc(60px / 7); } 75% { border-width: calc(60px / 23.33); } 100% { border-width: calc(60px / 7); } } ================================================ FILE: src/app/spring-spinner/spring-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SpringSpinnerComponent } from './spring-spinner.component'; describe('SpringSpinnerComponent', () => { let component: SpringSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SpringSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(SpringSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/spring-spinner/spring-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-spring-spinner', template: ` `, styleUrls: ['./spring-spinner.component.css'] }) export class SpringSpinnerComponent implements OnInit { constructor() { } @Input() size = 60; @Input() color = '#fff'; @Input() animationDuration = 2000; animationBaseName = 'spring-spinner-animation'; currentAnimationName = ''; get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px` }; } get spinnerPartStyle(): object { return { height: `${this.size / 2}px`, width: `${this.size}px` }; } get rotatorStyle(): object { return { height: `${this.size}px`, width: `${this.size}px`, borderRightColor: this.color, borderTopColor: this.color, borderWidth: `${this.size / 7}px`, animationDuration: `${this.animationDuration}ms`, animationName: this.currentAnimationName }; } ngOnInit() { } } ================================================ FILE: src/app/spring-spinner/spring-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {SpringSpinnerComponent} from './spring-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [SpringSpinnerComponent], declarations: [SpringSpinnerComponent], providers: [], }) export class SpringSpinnerModule { } ================================================ FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.component.css ================================================ .swapping-squares-spinner, .swapping-squares-spinner * { box-sizing: border-box; } .swapping-squares-spinner { height: 65px; width: 65px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } .swapping-squares-spinner .square { height: calc(65px * 0.25 / 1.3); width: calc(65px * 0.25 / 1.3); animation-duration: 1000ms; border: calc(65px * 0.04 / 1.3) solid #ff1d5e; margin-right: auto; margin-left: auto; position: absolute; animation-iteration-count: infinite; } .swapping-squares-spinner .square:nth-child(1) { animation-name: swapping-squares-animation-child-1; animation-delay: 500ms; } .swapping-squares-spinner .square:nth-child(2) { animation-name: swapping-squares-animation-child-2; animation-delay: 0ms; } .swapping-squares-spinner .square:nth-child(3) { animation-name: swapping-squares-animation-child-3; animation-delay: 500ms; } .swapping-squares-spinner .square:nth-child(4) { animation-name: swapping-squares-animation-child-4; animation-delay: 0ms; } @keyframes swapping-squares-animation-child-1 { 50% { transform: translate(150%,150%) scale(2,2); } } @keyframes swapping-squares-animation-child-2 { 50% { transform: translate(-150%,150%) scale(2,2); } } @keyframes swapping-squares-animation-child-3 { 50% { transform: translate(-150%,-150%) scale(2,2); } } @keyframes swapping-squares-animation-child-4 { 50% { transform: translate(150%,-150%) scale(2,2); } } ================================================ FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SwappingSquaresSpinnerComponent } from './swapping-squares-spinner.component'; describe('SwappingSquaresSpinnerComponent', () => { let component: SwappingSquaresSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SwappingSquaresSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(SwappingSquaresSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-swapping-squares-spinner', template: ` `, styleUrls: ['./swapping-squares-spinner.component.css'] }) export class SwappingSquaresSpinnerComponent implements OnInit { constructor() { } @Input() animationDuration = 1000; @Input() size = 65; @Input() color = '#fff'; animationBaseName = 'swapping-square-animation-child'; squaresNum = 4; get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px` }; } get squareStyle(): object { return { height: `${this.size * 0.25 / 1.3}px`, width: `${this.size * 0.25 / 1.3}px`, animationDuration: `${this.animationDuration}ms`, borderWidth: `${this.size * 0.04 / 1.3}px`, borderColor: this.color }; } get squaresStyles(): object { const squaresStyles = []; const delay = this.animationDuration * 0.5; for (let i = 1; i <= this.squaresNum; i++) { squaresStyles.push({ animationDelay: `${i % 2 === 0 ? delay : 0}ms`, ...this.squareStyle }); } return squaresStyles; } ngOnInit() { } } ================================================ FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {SwappingSquaresSpinnerComponent} from './swapping-squares-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [SwappingSquaresSpinnerComponent], declarations: [SwappingSquaresSpinnerComponent], providers: [], }) export class SwappingSquaresSpinnerModule { } ================================================ FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.component.css ================================================ .trinity-rings-spinner, .trinity-rings-spinner * { box-sizing: border-box; } .trinity-rings-spinner { height: 66px; width: 66px; padding: 3px; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row; overflow: hidden; box-sizing: border-box; } .trinity-rings-spinner .circle { position:absolute; display:block; border-radius:50%; border: 3px solid #ff1d5e; opacity: 1; } .trinity-rings-spinner .circle:nth-child(1) { height: 60px; width: 60px; animation : trinity-rings-spinner-circle1-animation 1.5s infinite linear; border-width: 3px; } .trinity-rings-spinner .circle:nth-child(2) { height: calc(60px * 0.65); width: calc(60px * 0.65); animation : trinity-rings-spinner-circle2-animation 1.5s infinite linear; border-width: 2px; } .trinity-rings-spinner .circle:nth-child(3) { height: calc(60px * 0.1); width: calc(60px * 0.1); animation:trinity-rings-spinner-circle3-animation 1.5s infinite linear; border-width: 1px; } @keyframes trinity-rings-spinner-circle1-animation{ 0% { transform: rotateZ(20deg) rotateY(0deg); } 100% { transform: rotateZ(100deg) rotateY(360deg); } } @keyframes trinity-rings-spinner-circle2-animation{ 0% { transform: rotateZ(100deg) rotateX(0deg); } 100% { transform: rotateZ(0deg) rotateX(360deg); } } @keyframes trinity-rings-spinner-circle3-animation{ 0% { transform: rotateZ(100deg) rotateX(-360deg); } 100% { transform: rotateZ(-360deg) rotateX(360deg); } } ================================================ FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.component.spec.ts ================================================ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { TrinityRingsSpinnerComponent } from './trinity-rings-spinner.component'; describe('TrinityRingsSpinnerComponent', () => { let component: TrinityRingsSpinnerComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TrinityRingsSpinnerComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TrinityRingsSpinnerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-trinity-rings-spinner', template: ` `, styleUrls: ['./trinity-rings-spinner.component.css'] }) export class TrinityRingsSpinnerComponent implements OnInit { constructor() { } containerPadding = 3; @Input() animationDuration = 1500; @Input() size = 60; @Input() color = '#fff'; get outerRingSize(): number { return this.size - this.containerPadding * 2; } get spinnerStyle(): object { return { height: `${this.size}px`, width: `${this.size}px`, padding: `${this.containerPadding}px` }; } get ring1Style(): object { return { height: `${this.outerRingSize}px`, width: `${this.outerRingSize}px`, borderColor: this.color, animationDuration: `${this.animationDuration}ms` }; } get ring2Style(): object { return { height: `${this.outerRingSize * 0.65}px`, width: `${this.outerRingSize * 0.65}px`, borderColor: this.color, animationDuration: `${this.animationDuration}ms` }; } get ring3Style(): object { return { height: `${this.outerRingSize * 0.1}px`, width: `${this.outerRingSize * 0.1}px`, borderColor: this.color, animationDuration: `${this.animationDuration}ms` }; } ngOnInit() { } } ================================================ FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.module.ts ================================================ import {NgModule} from '@angular/core'; import {TrinityRingsSpinnerComponent} from './trinity-rings-spinner.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], exports: [TrinityRingsSpinnerComponent], declarations: [TrinityRingsSpinnerComponent], providers: [], }) export class TrinityRingsSpinnerModule { } ================================================ FILE: src/environments/environment.prod.ts ================================================ export const environment = { production: true }; ================================================ FILE: src/environments/environment.ts ================================================ export const environment = { production: false }; ================================================ FILE: src/index.html ================================================ AngularEpicSpinners ================================================ FILE: src/main.ts ================================================ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); ================================================ FILE: src/polyfills.ts ================================================ /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import 'core-js/es7/reflect'; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ================================================ FILE: src/styles.css ================================================ /* You can add global styles to this file, and also import other style files */ body, main, html{ margin: 0; height: 100%; font-family: 'Roboto Mono', monospace; } body{ background: #030810; ; } ================================================ FILE: src/test.ts ================================================ // This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/proxy.js'; import 'zone.js/dist/sync-test'; import 'zone.js/dist/jasmine-patch'; import 'zone.js/dist/async-test'; import 'zone.js/dist/fake-async-test'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. declare const __karma__: any; declare const require: any; // Prevent Karma from running prematurely. __karma__.loaded = function () {}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); // Finally, start Karma to run the tests. __karma__.start(); ================================================ FILE: src/tsconfig.app.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } ================================================ FILE: src/tsconfig.spec.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "baseUrl": "./", "module": "commonjs", "target": "es5", "types": [ "jasmine", "node" ] }, "files": [ "test.ts", "polyfills.ts" ], "include": [ "**/*.spec.ts", "**/*.d.ts" ] } ================================================ FILE: src/typings.d.ts ================================================ /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ================================================ FILE: tsconfig.json ================================================ { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } ================================================ FILE: tslint.json ================================================ { "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "arrow-return-shorthand": true, "callable-types": true, "class-name": true, "comment-format": [ true, "check-space" ], "curly": true, "deprecation": { "severity": "warn" }, "eofline": true, "forin": true, "import-blacklist": [ true, "rxjs/Rx" ], "import-spacing": true, "indent": [ true, "spaces" ], "interface-over-type-literal": true, "label-position": true, "max-line-length": [ true, 140 ], "member-access": false, "member-ordering": [ true, { "order": [ "static-field", "instance-field", "static-method", "instance-method" ] } ], "no-arg": true, "no-bitwise": true, "no-console": [ true, "debug", "info", "time", "timeEnd", "trace" ], "no-construct": true, "no-debugger": true, "no-duplicate-super": true, "no-empty": false, "no-empty-interface": true, "no-eval": true, "no-inferrable-types": [ true, "ignore-params" ], "no-misused-new": true, "no-non-null-assertion": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, "no-switch-case-fall-through": true, "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [ true, "check-open-brace", "check-catch", "check-else", "check-whitespace" ], "prefer-const": true, "quotemark": [ true, "single" ], "radix": true, "semicolon": [ true, "always" ], "triple-equals": [ true, "allow-null-check" ], "typedef-whitespace": [ true, { "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" } ], "typeof-compare": true, "unified-signatures": true, "variable-name": false, "whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type" ], "directive-selector": [ true, "attribute", "app", "camelCase" ], "component-selector": [ true, "element", "app", "kebab-case" ], "no-output-on-prefix": true, "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, "no-input-rename": true, "no-output-rename": true, "use-life-cycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true } }