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
[]() []() []()
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
<app-atom-spinner
[animationDuration]="1000"
[size]="60"
[color]="'#ff1d5e'"
></app-atom-spinner>
```
## Components list
You can easily configure spinners' size, color and animation speed
```html
<app-flower-spinner
[animationDuration]="2500"
[size]="70"
[color]="'#ff1d5e'"
></app-flower-spinner>
<app-pixel-spinner
[animationDuration]="2000"
[pixelSize]="70"
[color]="'#ff1d5e'"
></app-pixel-spinner>
<app-hollow-dots-spinner
[animationDuration]="1000"
[dotSize]="15"
[dotsNum]="3"
[color]="'#ff1d5e'"
></app-hollow-dots-spinner>
<app-intersecting-circles-spinner
[animationDuration]="1200"
[size]="70"
[color]="'#ff1d5e'"
></app-intersecting-circles-spinner>
<app-orbit-spinner
[animationDuration]="1200"
[size]="55"
[color]="'#ff1d5e'"
></app-orbit-spinner>
<app-radar-spinner
[animationDuration]="2000"
[size]="60"
[color]="'#ff1d5e'"
></app-radar-spinner>
<app-scaling-squares-spinner
[animationDuration]="1250"
[size]="65"
[color]="'#ff1d5e'"
></app-scaling-squares-spinner>
<app-half-circle-spinner
[animationDuration]="1000"
[size]="60"
[color]="'#ff1d5e'"
></app-half-circle-spinner>
<app-trinity-rings-spinner
[animationDuration]="1500"
[size]="66"
[color]="'#ff1d5e'"
></app-trinity-rings-spinner>
<app-fulfilling-square-spinner
[animationDuration]="4000"
[size]="50"
[color]="'#ff1d5e'"
></app-fulfilling-square-spinner>
<app-circles-to-rhombuses-spinner
[animationDuration]="1200"
[circlesNum]="3"
[circleSize]="15"
[color]="'#ff1d5e'"
></app-circles-to-rhombuses-spinner>
<app-semipolar-spinner
[animationDuration]="2000"
[size]="65"
[color]="'#ff1d5e'"
></app-semipolar-spinner>
<app-self-building-square-spinner
[animationDuration]="6000"
[size]="40"
[color]="'#ff1d5e'"
></app-self-building-square-spinner>
<app-swapping-squares-spinner
[animationDuration]="1000"
[size]="65"
[color]="'#ff1d5e'"
></app-swapping-squares-spinner>
<app-fulfilling-bouncing-circle-spinner
[animationDuration]="4000"
[size]="60"
[color]="'#ff1d5e'"
></app-fulfilling-bouncing-circle-spinner>
<app-fingerprint-spinner
[animationDuration]="1500"
[size]="64"
[color]="'#ff1d5e'"
></app-fingerprint-spinner>
<app-spring-spinner
[animationDuration]="3000"
[size]="60"
[color]="'#ff1d5e'"
></app-spring-spinner>
<app-atom-spinner
[animationDuration]="1000"
[size]="60"
[color]="'#ff1d5e'"
></app-atom-spinner>
<app-looping-rhombuses-spinner
[animationDuration]="2500"
[rhombusSize]="15"
[color]="'#ff1d5e'"
></app-looping-rhombuses-spinner>
<app-breeding-rhombus-spinner
[animationDuration]="2000"
[size]="65"
[color]="'#ff1d5e'"
/><app-breeding-rhombus-spinner>
```
## 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 <richyafro@gmail.com>",
"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
================================================
<!--The content below is only a placeholder and can be replaced.-->
<div class="main-container">
<div class="title-holder">
<h1 class="header">Angular Epic Spinners</h1>
<h5 class="sub-header">Angular Implementation of
<a class="link" href="http://epic-spinners.epicmax.co/" target="_blank">Epic Spinners
</a>
</h5>
<div class="get-started">
<div class="get-started__docs">
<h4>Get started</h4>
<a href="https://github.com/hackafro/angular-epic-spinners" class="docs">Docs</a>
</div>
<div class="get-started-code">
<p>npm install angular-epic-spinners</p>
<p>yarn add angular-epic-spinners</p>
</div>
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-atom-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="2000"></app-atom-spinner>
</div>
<div class="name">
Atom Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-breeding-rhombus-spinner [color]="'#ff1d5e'" [size]="65" [animationDuration]="2000"></app-breeding-rhombus-spinner>
</div>
<div class="name">
Breeding Rhombus
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-circles-to-rhumbuses-spinner [color]="'#ff1d5e'" [circleSize]="15" [circlesNum]="3" [animationDuration]="1200"></app-circles-to-rhumbuses-spinner>
</div>
<div class="name">
Circles to rhumbuses
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-fingerprint-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1200"></app-fingerprint-spinner>
</div>
<div class="name">
Fingerprint Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-flower-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1200"></app-flower-spinner>
</div>
<div class="name">
Flower Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-fulfilling-bouncing-circle-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="2000"></app-fulfilling-bouncing-circle-spinner>
</div>
<div class="name">
Fulfilling Bouncing Circle
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-fulfilling-square-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1200"></app-fulfilling-square-spinner>
</div>
<div class="name">
Fulfilling Square
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-half-circle-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-half-circle-spinner>
</div>
<div class="name">
Half Circle Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-hollow-dots-spinner [color]="'#ff1d5e'" [dotSize]="15" [dotsNum]="3" [animationDuration]="1400"></app-hollow-dots-spinner>
</div>
<div class="name">
Hollow Dots Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-intersecting-circles-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-intersecting-circles-spinner>
</div>
<div class="name">
Intersecting Circles
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-looping-rhombuses-spinner [color]="'#ff1d5e'" [rhombusSize]="15" [animationDuration]="1200"></app-looping-rhombuses-spinner>
</div>
<div class="name">
Looping Rhombuses
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-orbit-spinner [color]="'#ff1d5e'" [size]="55" [animationDuration]="1400"></app-orbit-spinner>
</div>
<div class="name">
Orbit Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-pixel-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-pixel-spinner>
</div>
<div class="name">
Pixel Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-radar-spinner [size]="70" [color]="'#ff1d5e'" [animationDuration]="1200"></app-radar-spinner>
</div>
<div class="name">
Radar Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-scaling-squares-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1200"></app-scaling-squares-spinner>
</div>
<div class="name">
Scaling Squares Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-self-building-square-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-self-building-square-spinner>
</div>
<div class="name">
Self Building Square
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-semipolar-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-semipolar-spinner>
</div>
<div class="name">
SemiPolar Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-spring-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-spring-spinner>
</div>
<div class="name">
Spring Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-swapping-squares-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1400"></app-swapping-squares-spinner>
</div>
<div class="name">
Swapping Squares Spinner
</div>
</div>
<div class="spinner-holder">
<div class="spinner-element">
<app-trinity-rings-spinner [color]="'#ff1d5e'" [size]="70" [animationDuration]="1200"></app-trinity-rings-spinner>
</div>
<div class="name">
Trinity Rings Spinner
</div>
</div>
</div>
<footer>
<h4>By
<a href="https://github.com/hackafro" class="link">@hackAfro</a>
</h4>
<p>This project is an implementation of the
<a href="https://github.com/epicmaxco/epic-spinners" target="_blank" class="link">Epic Spinners</a> project created by
<a href="https://github.com/epicmaxco" target="_blank" class="link">EpicMaxCo</a>
</p>
</footer>
================================================
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<AtomSpinnerComponent>;
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: `
<div class="atom-spinner" [ngStyle]="spinnerStyle">
<div class="spinner-inner">
<div class="spinner-line" [ngStyle]="lineStyle"></div>
<div class="spinner-line" [ngStyle]="lineStyle"></div>
<div class="spinner-line" [ngStyle]="lineStyle"></div>
<div class="spinner-circle" [ngStyle]="circleStyle">
●
</div>
</div>
</div>
`,
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<BreedingRhombusSpinnerComponent>;
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: `
<div class="breeding-rhombus-spinner" [ngStyle]="spinnerStyle">
<div class="rhombus" *ngFor="let rs of rhombusesStyles; let i = index;" [ngStyle]="rs" [ngClass]="childClassString(i)"></div>
<div class="rhombus big" [ngStyle]="bigRhombusStyle"></div>
</div>
`,
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<CirclesToRhumbusesSpinnerComponent>;
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: `
<div class="circles-to-rhombuses-spinner" [ngStyle]="spinnerStyle">
<div class="circle" *ngFor="let cs of circlesStyles; let i = index;" [ngStyle]="cs"></div>
</div>
`,
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<FingerprintSpinnerComponent>;
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: `
<div class="fingerprint-spinner" [ngStyle]="spinnerStyle">
<div class="spinner-ring" *ngFor="let rs of ringsStyles" [ngStyle]="rs"></div>
</div>
`,
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<FlowerSpinnerComponent>;
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: `
<div class="flower-spinner" [ngStyle]="spinnerStyle">
<div class="dots-container" [ngStyle]="dotsContainerStyle">
<div class="bigger-dot" [ngStyle]="biggerDotStyle">
<div class="smaller-dot" [ngStyle]="smallerDotStyle"></div>
</div>
</div>
</div>
`,
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<FulfillingBouncingCircleSpinnerComponent>;
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: `
<div class="fulfilling-bouncing-circle-spinner" [ngStyle]="spinnerStyle">
<div class="circle" [ngStyle]="circleStyle"></div>
<div class="orbit" [ngStyle]="orbitStyle"></div>
</div>
`,
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<FulfillingSquareSpinnerComponent>;
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: `
<div class="fulfilling-square-spinner" [ngStyle]="spinnerStyle">
<div class="spinner-inner" [ngStyle]="spinnerInnerStyle"></div>
</div>
`,
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<HalfCircleSpinnerComponent>;
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: `
<div class="half-circle-spinner" [ngStyle]="spinnerStyle">
<div class="circle circle-1" [ngStyle]="circle1Style"></div>
<div class="circle circle-2" [ngStyle]="circle2Style"></div>
</div>
`,
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<HollowDotsSpinnerComponent>;
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: `
<div class="hollow-dots-spinner" [ngStyle]="spinnerStyle">
<div class="dot" *ngFor="let ds of dotsStyles" [ngStyle]="ds"></div>
</div>
`,
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<IntersectingCirclesSpinnerComponent>;
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: `
<div class="intersecting-circles-spinner" [ngStyle]="spinnerStyle">
<div class="spinnerBlock" [ngStyle]="spinnerBlockStyle">
<span class="circle" *ngFor="let cs of circleStyles" [ngStyle]="cs"></span>
</div>
</div>
`,
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<LoopingRhombusesSpinnerComponent>;
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: `
<div class="looping-rhombuses-spinner" [ngStyle]="spinnerStyle">
<div class="rhombus"
*ngFor="let rs of rhombusesStyles"
[ngStyle]="rs">
</div>
</div>
`,
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<OrbitSpinnerComponent>;
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: `
<div class="orbit-spinner" [ngStyle]="spinnerStyle">
<div class="orbit one" [ngStyle]="orbitStyle"></div>
<div class="orbit two" [ngStyle]="orbitStyle"></div>
<div class="orbit three" [ngStyle]="orbitStyle"></div>
</div>
`,
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<PixelSpinnerComponent>;
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: `
<div class="pixel-spinner" [ngStyle]="spinnerStyle">
<div class="pixel-spinner-inner" [ngStyle]="spinnerInnerStyle"></div>
</div>
`,
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<RadarSpinnerComponent>;
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: `
<div class="radar-spinner" [ngStyle]="spinnerStyle">
<div class="circle" *ngFor="let cs of circlesStyles" [ngStyle]="cs">
<div class="circle-inner-container" [ngStyle]="circleInnerContainerStyle">
<div class="circle-inner" [ngStyle]="circleInnerStyle"></div>
</div>
</div>
</div>
`,
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<ScalingSquaresSpinnerComponent>;
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: `
<div class="scaling-squares-spinner" [ngStyle]="spinnerStyle">
<div class="square"
*ngFor="let ss of squaresStyles; let i = index;"
[ngClass]="childClass(i)"
[ngStyle]="ss">
</div>
</div>
`,
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<SelfBuildingSquareSpinnerComponent>;
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: `
<div class="self-building-square-spinner" [ngStyle]="spinnerStyle">
<div class="square"
*ngFor="let ss of squaresStyles; let i = index;"
[ngStyle]="ss"
[ngClass]="{'clear': i && i % 3 === 0}"
>
</div>
</div>
`,
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<SemipolarSpinnerComponent>;
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: `
<div class="semipolar-spinner" [ngStyle]="spinnerStyle">
<div class="ring" *ngFor="let rs of ringsStyles" [ngStyle]="rs"></div>
</div>
`,
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<SpringSpinnerComponent>;
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: `
<div class="spring-spinner" [ngStyle]="spinnerStyle">
<div class="spring-spinner-part top" [ngStyle]="spinnerPartStyle">
<div class="spring-spinner-rotator" [ngStyle]="rotatorStyle"></div>
</div>
<div class="spring-spinner-part bottom" [ngStyle]="spinnerPartStyle">
<div class="spring-spinner-rotator" [ngStyle]="rotatorStyle"></div>
</div>
</div>
`,
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<SwappingSquaresSpinnerComponent>;
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: `
<div class="swapping-squares-spinner" [ngStyle]="spinnerStyle">
<div class="square"
*ngFor="let ss of squaresStyles; let i = index;"
[ngClass]="'square-' + (i + 1)"
[ngStyle]="ss">
</div>
</div>
`,
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<TrinityRingsSpinnerComponent>;
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: `
<div class="trinity-rings-spinner" [ngStyle]="spinnerStyle">
<div class="circle circle1" [ngStyle]="ring1Style"></div>
<div class="circle circle3" [ngStyle]="ring3Style"></div>
<div class="circle circle2" [ngStyle]="ring2Style"></div>
</div>
`,
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
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularEpicSpinners</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
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
}
}
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
SYMBOL INDEX (166 symbols across 46 files)
FILE: e2e/app.po.ts
class AppPage (line 3) | class AppPage {
method navigateTo (line 4) | navigateTo() {
method getParagraphText (line 8) | getParagraphText() {
FILE: protractor.conf.js
method onPrepare (line 22) | onPrepare() {
FILE: src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: src/app/app.module.ts
class AppModule (line 58) | class AppModule {
FILE: src/app/atom-spinner/atom-spinner.component.ts
class AtomSpinnerComponent (line 19) | class AtomSpinnerComponent implements OnInit {
method constructor (line 21) | constructor() {
method spinnerStyle (line 28) | get spinnerStyle() {
method circleStyle (line 35) | get circleStyle() {
method lineStyle (line 42) | get lineStyle() {
method ngOnInit (line 51) | ngOnInit() {
FILE: src/app/atom-spinner/atom-spinner.module.ts
class AtomSpinnerModule (line 12) | class AtomSpinnerModule {
FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.ts
class BreedingRhombusSpinnerComponent (line 13) | class BreedingRhombusSpinnerComponent implements OnInit {
method constructor (line 15) | constructor() { }
method spinnerStyle (line 23) | get spinnerStyle() {
method rhombusStyle (line 30) | get rhombusStyle() {
method rhombusesStyles (line 41) | get rhombusesStyles() {
method bigRhombusStyle (line 55) | get bigRhombusStyle() {
method childClassString (line 66) | childClassString(index) {
method ngOnInit (line 70) | ngOnInit() {
FILE: src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module.ts
class BreedingRhombusSpinnerModule (line 12) | class BreedingRhombusSpinnerModule {
FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.ts
class CirclesToRhumbusesSpinnerComponent (line 12) | class CirclesToRhumbusesSpinnerComponent implements OnInit {
method constructor (line 14) | constructor() {
method circleMarginLeft (line 22) | get circleMarginLeft() {
method spinnerStyle (line 26) | get spinnerStyle() {
method circleStyle (line 33) | get circleStyle() {
method circlesStyles (line 43) | get circlesStyles() {
method ngOnInit (line 58) | ngOnInit() {
FILE: src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module.ts
class CirclesToRhumbusesSpinnerModule (line 12) | class CirclesToRhumbusesSpinnerModule {
FILE: src/app/fingerprint-spinner/fingerprint-spinner.component.ts
class FingerprintSpinnerComponent (line 13) | class FingerprintSpinnerComponent implements OnInit {
method constructor (line 15) | constructor() {
method outerRingSize (line 25) | get outerRingSize(): number {
method spinnerStyle (line 29) | get spinnerStyle(): object {
method ringStyle (line 37) | get ringStyle(): object {
method ringsStyles (line 44) | get ringsStyles(): object {
method ngOnInit (line 61) | ngOnInit() {
FILE: src/app/fingerprint-spinner/fingerprint-spinner.module.ts
class FingerprintSpinnerModule (line 12) | class FingerprintSpinnerModule {
FILE: src/app/flower-spinner/flower-spinner.component.ts
class FlowerSpinnerComponent (line 16) | class FlowerSpinnerComponent implements OnInit, OnChanges {
method constructor (line 18) | constructor() {
method dotSize (line 30) | get dotSize(): number {
method spinnerStyle (line 34) | get spinnerStyle(): object {
method dotsContainerStyle (line 41) | get dotsContainerStyle(): object {
method smallerDotStyle (line 48) | get smallerDotStyle(): object {
method biggerDotStyle (line 56) | get biggerDotStyle(): object {
method ngOnInit (line 64) | ngOnInit() {
method ngOnChanges (line 67) | ngOnChanges() {
FILE: src/app/flower-spinner/flower-spinner.module.ts
class FlowerSpinnerModule (line 12) | class FlowerSpinnerModule {
FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.ts
class FulfillingBouncingCircleSpinnerComponent (line 13) | class FulfillingBouncingCircleSpinnerComponent implements OnInit {
method constructor (line 15) | constructor() {
method spinnerStyle (line 22) | get spinnerStyle() {
method orbitStyle (line 30) | get orbitStyle() {
method circleStyle (line 40) | get circleStyle() {
method ngOnInit (line 52) | ngOnInit() {
FILE: src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module.ts
class FulfillingBouncingCircleSpinnerModule (line 12) | class FulfillingBouncingCircleSpinnerModule {
FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.ts
class FulfillingSquareSpinnerComponent (line 12) | class FulfillingSquareSpinnerComponent implements OnInit {
method constructor (line 14) | constructor() {
method spinnerStyle (line 21) | get spinnerStyle() {
method spinnerInnerStyle (line 29) | get spinnerInnerStyle() {
method ngOnInit (line 36) | ngOnInit() {
FILE: src/app/fulfilling-square-spinner/fulfilling-square-spinner.module.ts
class FulfillingSquareSpinnerModule (line 12) | class FulfillingSquareSpinnerModule {
FILE: src/app/half-circle-spinner/half-circle-spinner.component.ts
class HalfCircleSpinnerComponent (line 13) | class HalfCircleSpinnerComponent implements OnInit {
method constructor (line 15) | constructor() {
method spinnerStyle (line 22) | get spinnerStyle() {
method circleStyle (line 29) | get circleStyle() {
method circle1Style (line 36) | get circle1Style() {
method circle2Style (line 43) | get circle2Style() {
method ngOnInit (line 50) | ngOnInit() {
FILE: src/app/half-circle-spinner/half-circle-spinner.module.ts
class HalfCircleSpinnerModule (line 12) | class HalfCircleSpinnerModule {
FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.component.ts
class HollowDotsSpinnerComponent (line 12) | class HollowDotsSpinnerComponent implements OnInit {
method constructor (line 14) | constructor() {
method horizontalMargin (line 22) | get horizontalMargin(): number {
method spinnerStyle (line 26) | get spinnerStyle(): object {
method dotStyle (line 33) | get dotStyle(): object {
method dotsStyles (line 44) | get dotsStyles(): object {
method ngOnInit (line 61) | ngOnInit() {
FILE: src/app/hollow-dots-spinner/hollow-dots-spinner.module.ts
class HollowDotsSpinnerModule (line 12) | class HollowDotsSpinnerModule {
FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.ts
class IntersectingCirclesSpinnerComponent (line 14) | class IntersectingCirclesSpinnerComponent implements OnInit {
method constructor (line 16) | constructor() {
method circleSize (line 23) | get circleSize(): number {
method spinnerStyle (line 27) | get spinnerStyle(): object {
method spinnerBlockStyle (line 34) | get spinnerBlockStyle(): object {
method circleStyle (line 42) | get circleStyle(): object {
method circleStyles (line 48) | get circleStyles(): object {
method ngOnInit (line 64) | ngOnInit() {
FILE: src/app/intersecting-circles-spinner/intersecting-circles-spinner.module.ts
class IntersectingCirclesSpinnerModule (line 12) | class IntersectingCirclesSpinnerModule {
FILE: src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.component.ts
class LoopingRhumbusesSpinnerComponent (line 15) | class LoopingRhumbusesSpinnerComponent implements OnInit {
method constructor (line 17) | constructor() {
method spinnerStyle (line 26) | get spinnerStyle(): object {
method rhombusStyle (line 33) | get rhombusStyle(): object {
method rhombusesStyles (line 43) | get rhombusesStyles(): object {
method ngOnInit (line 55) | ngOnInit() {
FILE: src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module.ts
class LoopingRhumbusesSpinnerModule (line 12) | class LoopingRhumbusesSpinnerModule {
FILE: src/app/orbit-spinner/orbit-spinner.component.ts
class OrbitSpinnerComponent (line 14) | class OrbitSpinnerComponent implements OnInit {
method constructor (line 16) | constructor() {
method spinnerStyle (line 23) | get spinnerStyle(): object {
method orbitStyle (line 30) | get orbitStyle(): object {
method ngOnInit (line 37) | ngOnInit() {
FILE: src/app/orbit-spinner/orbit-spinner.module.ts
class OrbitSpinnerModule (line 12) | class OrbitSpinnerModule {
FILE: src/app/pixel-spinner/pixel-spinner.component.ts
class PixelSpinnerComponent (line 12) | class PixelSpinnerComponent implements OnInit {
method constructor (line 14) | constructor() {
method pixelSize (line 24) | get pixelSize(): number {
method spinnerStyle (line 28) | get spinnerStyle(): object {
method spinnerInnerStyle (line 35) | get spinnerInnerStyle(): object {
method ngOnInit (line 56) | ngOnInit() {
FILE: src/app/pixel-spinner/pixel-spinner.module.ts
class PixelSpinnerModule (line 12) | class PixelSpinnerModule {
FILE: src/app/radar-spinner/radar-spinner.component.ts
class RadarSpinnerComponent (line 16) | class RadarSpinnerComponent implements OnInit {
method constructor (line 18) | constructor() {
method borderWidth (line 27) | get borderWidth(): number {
method spinnerStyle (line 31) | get spinnerStyle(): object {
method circleStyle (line 38) | get circleStyle(): object {
method circleInnerContainerStyle (line 44) | get circleInnerContainerStyle(): object {
method circleInnerStyle (line 50) | get circleInnerStyle(): object {
method circlesStyles (line 58) | get circlesStyles(): object {
method ngOnInit (line 70) | ngOnInit() {
FILE: src/app/radar-spinner/radar-spinner.module.ts
class RadarSpinnerModule (line 12) | class RadarSpinnerModule {
FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.component.ts
class ScalingSquaresSpinnerComponent (line 16) | class ScalingSquaresSpinnerComponent implements OnInit {
method constructor (line 18) | constructor() {
method spinnerStyle (line 27) | get spinnerStyle(): object {
method squareStyle (line 35) | get squareStyle(): object {
method squaresStyles (line 45) | get squaresStyles(): object {
method childClass (line 53) | childClass(i) {
method ngOnInit (line 57) | ngOnInit() {
FILE: src/app/scaling-squares-spinner/scaling-squares-spinner.module.ts
class ScalingSquaresSpinnerModule (line 12) | class ScalingSquaresSpinnerModule {
FILE: src/app/self-building-square-spinner/self-building-square-spinner.component.ts
class SelfBuildingSquareSpinnerComponent (line 17) | class SelfBuildingSquareSpinnerComponent implements OnInit {
method constructor (line 19) | constructor() {
method squareSize (line 28) | get squareSize(): number {
method initialTopPosition (line 32) | get initialTopPosition(): number {
method spinnerStyle (line 36) | get spinnerStyle(): object {
method squareStyle (line 44) | get squareStyle(): object {
method squaresStyles (line 56) | get squaresStyles(): object {
method ngOnInit (line 69) | ngOnInit() {
FILE: src/app/self-building-square-spinner/self-building-square-spinner.module.ts
class SelfBuildingSquareSpinnerModule (line 12) | class SelfBuildingSquareSpinnerModule {
FILE: src/app/semipolar-spinner/semipolar-spinner.component.ts
class SemipolarSpinnerComponent (line 12) | class SemipolarSpinnerComponent implements OnInit {
method constructor (line 14) | constructor() {
method spinnerStyle (line 23) | get spinnerStyle(): object {
method ringStyle (line 30) | get ringStyle(): object {
method ringsStyles (line 38) | get ringsStyles(): object {
method ngOnInit (line 62) | ngOnInit() {
FILE: src/app/semipolar-spinner/semipolar-spinner.module.ts
class SemipolarSpinnerModule (line 12) | class SemipolarSpinnerModule {
FILE: src/app/services/utils.service.ts
class UtilsService (line 4) | class UtilsService {
method constructor (line 6) | constructor() { }
FILE: src/app/spring-spinner/spring-spinner.component.ts
class SpringSpinnerComponent (line 17) | class SpringSpinnerComponent implements OnInit {
method constructor (line 19) | constructor() {
method spinnerStyle (line 29) | get spinnerStyle(): object {
method spinnerPartStyle (line 36) | get spinnerPartStyle(): object {
method rotatorStyle (line 43) | get rotatorStyle(): object {
method ngOnInit (line 55) | ngOnInit() {
FILE: src/app/spring-spinner/spring-spinner.module.ts
class SpringSpinnerModule (line 12) | class SpringSpinnerModule {
FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.component.ts
class SwappingSquaresSpinnerComponent (line 16) | class SwappingSquaresSpinnerComponent implements OnInit {
method constructor (line 18) | constructor() {
method spinnerStyle (line 28) | get spinnerStyle(): object {
method squareStyle (line 35) | get squareStyle(): object {
method squaresStyles (line 45) | get squaresStyles(): object {
method ngOnInit (line 58) | ngOnInit() {
FILE: src/app/swapping-squares-spinner/swapping-squares-spinner.module.ts
class SwappingSquaresSpinnerModule (line 12) | class SwappingSquaresSpinnerModule {
FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.component.ts
class TrinityRingsSpinnerComponent (line 14) | class TrinityRingsSpinnerComponent implements OnInit {
method constructor (line 16) | constructor() {
method outerRingSize (line 25) | get outerRingSize(): number {
method spinnerStyle (line 29) | get spinnerStyle(): object {
method ring1Style (line 37) | get ring1Style(): object {
method ring2Style (line 46) | get ring2Style(): object {
method ring3Style (line 55) | get ring3Style(): object {
method ngOnInit (line 64) | ngOnInit() {
FILE: src/app/trinity-rings-spinner/trinity-rings-spinner.module.ts
class TrinityRingsSpinnerModule (line 12) | class TrinityRingsSpinnerModule {
FILE: src/typings.d.ts
type NodeModule (line 3) | interface NodeModule {
Condensed preview — 114 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (132K chars).
[
{
"path": ".editorconfig",
"chars": 245,
"preview": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = "
},
{
"path": ".gitignore",
"chars": 516,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# depe"
},
{
"path": ".npmignore",
"chars": 210,
"preview": "/.idea\n/node_modules\n/dist\n.travis.yml\ntsconfig.json\ntslint.json\n/e2e\n/src/test.ts\n/src/tsconfig.app.json\n/src/environme"
},
{
"path": ".travis.yml",
"chars": 431,
"preview": "sudo: required\ndist: trusty\nlanguage: node_js\nnode_js:\n - '8.0.0'\n\naddons:\napt:\n sources:\n - google-chrome\n packag"
},
{
"path": "LICENSE",
"chars": 1069,
"preview": "MIT License\n\nCopyright (c) 2018 Richard Afro\n\nPermission is hereby granted, free of charge, to any person obtaining a co"
},
{
"path": "README.md",
"chars": 3724,
"preview": "# Angular Epic Spinners\n[]() [![npm](https://img.shields."
},
{
"path": "angular.json",
"chars": 3688,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "e2e/app.e2e-spec.ts",
"chars": 303,
"preview": "import { AppPage } from './app.po';\n\ndescribe('angular-epic-spinners App', () => {\n let page: AppPage;\n\n beforeEach(()"
},
{
"path": "e2e/app.po.ts",
"chars": 208,
"preview": "import { browser, by, element } from 'protractor';\n\nexport class AppPage {\n navigateTo() {\n return browser.get('/');"
},
{
"path": "e2e/tsconfig.e2e.json",
"chars": 235,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/e2e\",\n \"baseUrl\": \"./\",\n \"modu"
},
{
"path": "karma.conf.js",
"chars": 962,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "ng-package.json",
"chars": 117,
"preview": "{\n \"$schema\": \"./node_modules/ng-packagr/ng-package.schema.json\",\n \"lib\": {\n \"entryFile\": \"public_api.ts\"\n }\n}\n"
},
{
"path": "package.json",
"chars": 1512,
"preview": "{\n \"name\": \"angular-epic-spinners\",\n \"version\": \"2.0.0\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start"
},
{
"path": "protractor.conf.js",
"chars": 722,
"preview": "// Protractor configuration file, see link for more information\n// https://github.com/angular/protractor/blob/master/lib"
},
{
"path": "public_api.ts",
"chars": 1546,
"preview": "export * from './src/app/atom-spinner/atom-spinner.module';\nexport * from './src/app/breeding-rhombus-spinner/breeding-r"
},
{
"path": "src/app/app.component.html",
"chars": 6421,
"preview": "<!--The content below is only a placeholder and can be replaced.-->\n<div class=\"main-container\">\n <div class=\"title-hol"
},
{
"path": "src/app/app.component.scss",
"chars": 2261,
"preview": "// I changed this file to scss to enable me display the name on hover.\n// The implementation was easier and more readabl"
},
{
"path": "src/app/app.component.spec.ts",
"chars": 986,
"preview": "import { TestBed, async } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\ndescribe('AppCom"
},
{
"path": "src/app/app.component.ts",
"chars": 211,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "src/app/app.module.ts",
"chars": 2838,
"preview": "import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n\nimport { AppCompo"
},
{
"path": "src/app/atom-spinner/atom-spinner.component.css",
"chars": 1589,
"preview": ".atom-spinner,\n.atom-spinner * {\n box-sizing: border-box;\n}\n\n.atom-spinner {\n height: 60px;\n width: 60px;\n overflow:"
},
{
"path": "src/app/atom-spinner/atom-spinner.component.spec.ts",
"chars": 664,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { AtomSpinnerComponent } from './atom-"
},
{
"path": "src/app/atom-spinner/atom-spinner.component.ts",
"chars": 1223,
"preview": "import {Component, OnInit, Input} from '@angular/core';\n\n@Component({\n selector: 'app-atom-spinner',\n template: `\n "
},
{
"path": "src/app/atom-spinner/atom-spinner.module.ts",
"chars": 320,
"preview": "import {NgModule} from '@angular/core';\n\nimport {AtomSpinnerComponent} from './atom-spinner.component';\nimport {CommonMo"
},
{
"path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.css",
"chars": 3085,
"preview": " .breeding-rhombus-spinner {\n height: 65px;\n width: 65px;\n position: relative;\n transform: rotate(45deg);\n }\n\n ."
},
{
"path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.spec.ts",
"chars": 742,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { BreedingRhombusSpinnerComponent } fr"
},
{
"path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.component.ts",
"chars": 1837,
"preview": "import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n selector: 'app-breeding-rhombus-spinner',\n te"
},
{
"path": "src/app/breeding-rhombus-spinner/breeding-rhombus-spinner.module.ts",
"chars": 376,
"preview": "import {NgModule} from '@angular/core';\n\nimport {BreedingRhombusSpinnerComponent} from './breeding-rhombus-spinner.compo"
},
{
"path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.css",
"chars": 1175,
"preview": ".circles-to-rhombuses-spinner, .circles-to-rhombuses-spinner * {\n box-sizing: border-box;\n}\n\n.circles-to-rhombuses-spin"
},
{
"path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.spec.ts",
"chars": 764,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { CirclesToRhumbusesSpinnerComponent }"
},
{
"path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.component.ts",
"chars": 1407,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-circles-to-rhumbuses-spinner',\n"
},
{
"path": "src/app/circles-to-rhumbuses-spinner/circles-to-rhumbuses-spinner.module.ts",
"chars": 392,
"preview": "import {NgModule} from '@angular/core';\n\nimport {CirclesToRhumbusesSpinnerComponent} from './circles-to-rhumbuses-spinne"
},
{
"path": "src/app/fingerprint-spinner/fingerprint-spinner.component.css",
"chars": 2122,
"preview": ".fingerprint-spinner, .fingerprint-spinner * {\n box-sizing: border-box;\n}\n\n.fingerprint-spinner {\n height: 64px;\n wid"
},
{
"path": "src/app/fingerprint-spinner/fingerprint-spinner.component.spec.ts",
"chars": 713,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FingerprintSpinnerComponent } from '"
},
{
"path": "src/app/fingerprint-spinner/fingerprint-spinner.component.ts",
"chars": 1410,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-fingerprint-spinner',\n templat"
},
{
"path": "src/app/fingerprint-spinner/fingerprint-spinner.module.ts",
"chars": 355,
"preview": "import {NgModule} from '@angular/core';\n\nimport {FingerprintSpinnerComponent} from './fingerprint-spinner.component';\nim"
},
{
"path": "src/app/flower-spinner/flower-spinner.component.css",
"chars": 2448,
"preview": ".flower-spinner, .flower-spinner * {\n box-sizing: border-box;\n}\n\n.flower-spinner {\n height: 70px;\n width: 70px;\n dis"
},
{
"path": "src/app/flower-spinner/flower-spinner.component.spec.ts",
"chars": 678,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FlowerSpinnerComponent } from './flo"
},
{
"path": "src/app/flower-spinner/flower-spinner.component.ts",
"chars": 1645,
"preview": "import { Component, Input, OnChanges, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-flower-spinner',\n t"
},
{
"path": "src/app/flower-spinner/flower-spinner.module.ts",
"chars": 330,
"preview": "import {NgModule} from '@angular/core';\n\nimport {FlowerSpinnerComponent} from './flower-spinner.component';\nimport {Comm"
},
{
"path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.css",
"chars": 2112,
"preview": "\n.fulfilling-bouncing-circle-spinner, .fulfilling-bouncing-circle-spinner * {\n box-sizing: border-box;\n}\n.fulfilling-bo"
},
{
"path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.spec.ts",
"chars": 806,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FulfillingBouncingCircleSpinnerCompo"
},
{
"path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.component.ts",
"chars": 1294,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-fulfilling-bouncing-circle-spin"
},
{
"path": "src/app/fulfilling-bouncing-circle-spinner/fulfilling-bouncing-circle-spinner.module.ts",
"chars": 422,
"preview": "import {NgModule} from '@angular/core';\n\nimport {FulfillingBouncingCircleSpinnerComponent} from './fulfilling-bouncing-c"
},
{
"path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.css",
"chars": 957,
"preview": ".fulfilling-square-spinner, .fulfilling-square-spinner * {\n box-sizing: border-box;\n}\n.fulfilling-square-spinner {\n he"
},
{
"path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.spec.ts",
"chars": 749,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { FulfillingSquareSpinnerComponent } f"
},
{
"path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.component.ts",
"chars": 777,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-fulfilling-square-spinner',\n t"
},
{
"path": "src/app/fulfilling-square-spinner/fulfilling-square-spinner.module.ts",
"chars": 381,
"preview": "import {NgModule} from '@angular/core';\n\nimport {FulfillingSquareSpinnerComponent} from './fulfilling-square-spinner.com"
},
{
"path": "src/app/half-circle-spinner/half-circle-spinner.component.css",
"chars": 740,
"preview": ".half-circle-spinner, .half-circle-spinner * {\n box-sizing: border-box;\n}\n.half-circle-spinner {\n width: 60px;\n heigh"
},
{
"path": "src/app/half-circle-spinner/half-circle-spinner.component.spec.ts",
"chars": 707,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HalfCircleSpinnerComponent } from '."
},
{
"path": "src/app/half-circle-spinner/half-circle-spinner.component.ts",
"chars": 1061,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-half-circle-spinner',\n templat"
},
{
"path": "src/app/half-circle-spinner/half-circle-spinner.module.ts",
"chars": 351,
"preview": "import {NgModule} from '@angular/core';\n\nimport {HalfCircleSpinnerComponent} from './half-circle-spinner.component';\nimp"
},
{
"path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.css",
"chars": 764,
"preview": "\n.hollow-dots-spinner, .hollow-dots-spinner * {\n box-sizing: border-box;\n}\n.hollow-dots-spinner {\n height: 15px;\n wid"
},
{
"path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.spec.ts",
"chars": 707,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { HollowDotsSpinnerComponent } from '."
},
{
"path": "src/app/hollow-dots-spinner/hollow-dots-spinner.component.ts",
"chars": 1394,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-hollow-dots-spinner',\n templat"
},
{
"path": "src/app/hollow-dots-spinner/hollow-dots-spinner.module.ts",
"chars": 351,
"preview": "import {NgModule} from '@angular/core';\n\nimport {HollowDotsSpinnerComponent} from './hollow-dots-spinner.component';\nimp"
},
{
"path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.css",
"chars": 1477,
"preview": ".intersecting-circles-spinner, .intersecting-circles-spinner * {\n box-sizing: border-box;\n}\n.intersecting-circles-spinn"
},
{
"path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.spec.ts",
"chars": 770,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { IntersectingCirclesSpinnerComponent "
},
{
"path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.component.ts",
"chars": 1721,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-intersecting-circles-spinner',\n "
},
{
"path": "src/app/intersecting-circles-spinner/intersecting-circles-spinner.module.ts",
"chars": 396,
"preview": "import {NgModule} from '@angular/core';\n\nimport {IntersectingCirclesSpinnerComponent} from './intersecting-circles-spinn"
},
{
"path": "src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.css",
"chars": 1030,
"preview": ".looping-rhombuses-spinner, .looping-rhombuses-spinner * {\n box-sizing: border-box;\n}\n.looping-rhombuses-spinner {\n wi"
},
{
"path": "src/app/looping-rhombuses-spinner/looping-rhombuses-spinner.component.spec.ts",
"chars": 749,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { LoopingRhombusesSpinnerComponent } f"
},
{
"path": "src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.component.ts",
"chars": 1364,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-looping-rhombuses-spinner',\n t"
},
{
"path": "src/app/looping-rhombuses-spinner/looping-rhumbuses-spinner.module.ts",
"chars": 381,
"preview": "import {NgModule} from '@angular/core';\n\nimport {LoopingRhumbusesSpinnerComponent} from './looping-rhumbuses-spinner.com"
},
{
"path": "src/app/orbit-spinner/orbit-spinner.component.css",
"chars": 1376,
"preview": ".orbit-spinner, .orbit-spinner * {\n box-sizing: border-box;\n}\n.orbit-spinner {\n height: 55px;\n width: 55px;\n border-"
},
{
"path": "src/app/orbit-spinner/orbit-spinner.component.spec.ts",
"chars": 671,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { OrbitSpinnerComponent } from './orbi"
},
{
"path": "src/app/orbit-spinner/orbit-spinner.component.ts",
"chars": 865,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-orbit-spinner',\n template: `\n "
},
{
"path": "src/app/orbit-spinner/orbit-spinner.module.ts",
"chars": 325,
"preview": "import {NgModule} from '@angular/core';\n\nimport {OrbitSpinnerComponent} from './orbit-spinner.component';\nimport {Common"
},
{
"path": "src/app/pixel-spinner/pixel-spinner.component.css",
"chars": 970,
"preview": ".pixel-spinner, .pixel-spinner * {\n box-sizing: border-box;\n}\n\n.pixel-spinner {\n height: 70px;\n width: 70px;\n displa"
},
{
"path": "src/app/pixel-spinner/pixel-spinner.component.spec.ts",
"chars": 671,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { PixelSpinnerComponent } from './pixe"
},
{
"path": "src/app/pixel-spinner/pixel-spinner.component.ts",
"chars": 1660,
"preview": "import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-pixel-spinner',\n template: `\n "
},
{
"path": "src/app/pixel-spinner/pixel-spinner.module.ts",
"chars": 325,
"preview": "import {NgModule} from '@angular/core';\n\nimport {PixelSpinnerComponent} from './pixel-spinner.component';\nimport {Common"
},
{
"path": "src/app/radar-spinner/radar-spinner.component.css",
"chars": 1106,
"preview": ".radar-spinner, .radar-spinner * {\n box-sizing: border-box;\n}\n.radar-spinner {\n height: 60px;\n width: 60px;\n positio"
},
{
"path": "src/app/radar-spinner/radar-spinner.component.spec.ts",
"chars": 671,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { RadarSpinnerComponent } from './rada"
},
{
"path": "src/app/radar-spinner/radar-spinner.component.ts",
"chars": 1680,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-radar-spinner',\n template: `\n "
},
{
"path": "src/app/radar-spinner/radar-spinner.module.ts",
"chars": 325,
"preview": "import {NgModule} from '@angular/core';\n\nimport {RadarSpinnerComponent} from './radar-spinner.component';\nimport {Common"
},
{
"path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.css",
"chars": 1700,
"preview": ".scaling-squares-spinner, .scaling-squares-spinner * {\n box-sizing: border-box;\n}\n.scaling-squares-spinner {\n height: "
},
{
"path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.spec.ts",
"chars": 735,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { ScalingSquaresSpinnerComponent } fro"
},
{
"path": "src/app/scaling-squares-spinner/scaling-squares-spinner.component.ts",
"chars": 1353,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-scaling-squares-spinner',\n templ"
},
{
"path": "src/app/scaling-squares-spinner/scaling-squares-spinner.module.ts",
"chars": 371,
"preview": "import {NgModule} from '@angular/core';\n\nimport {ScalingSquaresSpinnerComponent} from './scaling-squares-spinner.compone"
},
{
"path": "src/app/self-building-square-spinner/self-building-square-spinner.component.css",
"chars": 1553,
"preview": ".self-building-square-spinner, .self-building-square-spinner * {\n box-sizing: border-box;\n}\n.self-building-square-spinn"
},
{
"path": "src/app/self-building-square-spinner/self-building-square-spinner.component.spec.ts",
"chars": 764,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SelfBuildingSquareSpinnerComponent }"
},
{
"path": "src/app/self-building-square-spinner/self-building-square-spinner.component.ts",
"chars": 1737,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-self-building-square-spinner',\n "
},
{
"path": "src/app/self-building-square-spinner/self-building-square-spinner.module.ts",
"chars": 392,
"preview": "import {NgModule} from '@angular/core';\n\nimport {SelfBuildingSquareSpinnerComponent} from './self-building-square-spinne"
},
{
"path": "src/app/semipolar-spinner/semipolar-spinner.component.css",
"chars": 1652,
"preview": ".semipolar-spinner, .semipolar-spinner * {\n box-sizing: border-box;\n}\n.semipolar-spinner {\n height: 65px;\n width: 65p"
},
{
"path": "src/app/semipolar-spinner/semipolar-spinner.component.spec.ts",
"chars": 699,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SemipolarSpinnerComponent } from './"
},
{
"path": "src/app/semipolar-spinner/semipolar-spinner.component.ts",
"chars": 1604,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-semipolar-spinner',\n template: `"
},
{
"path": "src/app/semipolar-spinner/semipolar-spinner.module.ts",
"chars": 345,
"preview": "import {NgModule} from '@angular/core';\n\nimport {SemipolarSpinnerComponent} from './semipolar-spinner.component';\nimport"
},
{
"path": "src/app/services/utils.service.spec.ts",
"chars": 368,
"preview": "import { TestBed, inject } from '@angular/core/testing';\n\nimport { UtilsService } from './utils.service';\n\ndescribe('Uti"
},
{
"path": "src/app/services/utils.service.ts",
"chars": 111,
"preview": "import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class UtilsService {\n\n constructor() { }\n\n}\n"
},
{
"path": "src/app/spring-spinner/spring-spinner.component.css",
"chars": 938,
"preview": ".spring-spinner, .spring-spinner * {\n box-sizing: border-box;\n}\n.spring-spinner {\n height: 60px;\n width: 60px;\n}\n.spr"
},
{
"path": "src/app/spring-spinner/spring-spinner.component.spec.ts",
"chars": 678,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SpringSpinnerComponent } from './spr"
},
{
"path": "src/app/spring-spinner/spring-spinner.component.ts",
"chars": 1416,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-spring-spinner',\n template: `\n "
},
{
"path": "src/app/spring-spinner/spring-spinner.module.ts",
"chars": 330,
"preview": "import {NgModule} from '@angular/core';\n\nimport {SpringSpinnerComponent} from './spring-spinner.component';\nimport {Comm"
},
{
"path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.css",
"chars": 1513,
"preview": ".swapping-squares-spinner, .swapping-squares-spinner * {\n box-sizing: border-box;\n}\n.swapping-squares-spinner {\n heigh"
},
{
"path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.spec.ts",
"chars": 742,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { SwappingSquaresSpinnerComponent } fr"
},
{
"path": "src/app/swapping-squares-spinner/swapping-squares-spinner.component.ts",
"chars": 1432,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-swapping-squares-spinner',\n temp"
},
{
"path": "src/app/swapping-squares-spinner/swapping-squares-spinner.module.ts",
"chars": 376,
"preview": "import {NgModule} from '@angular/core';\n\nimport {SwappingSquaresSpinnerComponent} from './swapping-squares-spinner.compo"
},
{
"path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.css",
"chars": 1541,
"preview": ".trinity-rings-spinner, .trinity-rings-spinner * {\n box-sizing: border-box;\n}\n.trinity-rings-spinner {\n height: 66px;\n"
},
{
"path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.spec.ts",
"chars": 721,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { TrinityRingsSpinnerComponent } from "
},
{
"path": "src/app/trinity-rings-spinner/trinity-rings-spinner.component.ts",
"chars": 1615,
"preview": "import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n selector: 'app-trinity-rings-spinner',\n templat"
},
{
"path": "src/app/trinity-rings-spinner/trinity-rings-spinner.module.ts",
"chars": 361,
"preview": "import {NgModule} from '@angular/core';\n\nimport {TrinityRingsSpinnerComponent} from './trinity-rings-spinner.component';"
},
{
"path": "src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "src/environments/environment.ts",
"chars": 52,
"preview": "export const environment = {\n production: false\n};\n"
},
{
"path": "src/index.html",
"chars": 403,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>AngularEpicSpinners</title>\n <base href=\"/\">\n"
},
{
"path": "src/main.ts",
"chars": 370,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "src/polyfills.ts",
"chars": 2405,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "src/styles.css",
"chars": 204,
"preview": "/* You can add global styles to this file, and also import other style files */\nbody, main, html{\n margin: 0;\n height:"
},
{
"path": "src/test.ts",
"chars": 1085,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "src/tsconfig.app.json",
"chars": 211,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"baseUrl\": \"./\",\n \"modu"
},
{
"path": "src/tsconfig.spec.json",
"chars": 324,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/spec\",\n \"baseUrl\": \"./\",\n \"mod"
},
{
"path": "src/typings.d.ts",
"chars": 104,
"preview": "/* SystemJS module definition */\ndeclare var module: NodeModule;\ninterface NodeModule {\n id: string;\n}\n"
},
{
"path": "tsconfig.json",
"chars": 363,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declarati"
},
{
"path": "tslint.json",
"chars": 3026,
"preview": "{\n \"rulesDirectory\": [\n \"node_modules/codelyzer\"\n ],\n \"rules\": {\n \"arrow-return-shorthand\": true,\n \"callable"
}
]
About this extraction
This page contains the full source code of the HackAfro/angular-epic-spinners GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 114 files (114.5 KB), approximately 36.6k tokens, and a symbol index with 166 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.