added new loader - orbitals-loader, create new package version and pu…

…blish to npm, create new components version and export to bit.dev
JoshK2 · Sep 14, 2019 · 951235d · 951235d
1 parent c15de27
commit 951235d
Show file tree

Hide file tree

Showing 15 changed files with 255 additions and 26 deletions.
diff --git a/.bitmap b/.bitmap
@@ -1,7 +1,7 @@
 /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
 
 {
-    "joshk.ng-spinners/circle-loader@1.0.1": {
+    "joshk.ng-spinners/circle-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/circle-loader/circleloader.component.css",
@@ -34,7 +34,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/default-loader@1.0.1": {
+    "joshk.ng-spinners/default-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/default-loader/defaultloader.component.css",
@@ -67,7 +67,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/dualring-loader@1.0.1": {
+    "joshk.ng-spinners/dualring-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/dualring-loader/dualringloader.component.css",
@@ -100,7 +100,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/ellipsis-loader@1.0.1": {
+    "joshk.ng-spinners/ellipsis-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/ellipsis-loader/ellipsisloader.component.css",
@@ -133,7 +133,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/facebook-loader@1.0.1": {
+    "joshk.ng-spinners/facebook-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/facebook-loader/facebookloader.component.css",
@@ -166,7 +166,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/grid-loader@1.0.1": {
+    "joshk.ng-spinners/grid-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/grid-loader/gridloader.component.css",
@@ -199,7 +199,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/heart-loader@1.0.1": {
+    "joshk.ng-spinners/heart-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/heart-loader/heartloader.component.css",
@@ -232,7 +232,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/hourglass-loader@1.0.1": {
+    "joshk.ng-spinners/hourglass-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/hourglass-loader/hourglassloader.component.css",
@@ -265,7 +265,40 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/[email protected]": {
+    "joshk.ng-spinners/[email protected]": {
+        "files": [
+            {
+                "relativePath": "lib/components/orbitals-loader/index.ts",
+                "test": false,
+                "name": "index.ts"
+            },
+            {
+                "relativePath": "lib/components/orbitals-loader/orbitalsloader.component.css",
+                "test": false,
+                "name": "orbitalsloader.component.css"
+            },
+            {
+                "relativePath": "lib/components/orbitals-loader/orbitalsloader.component.html",
+                "test": false,
+                "name": "orbitalsloader.component.html"
+            },
+            {
+                "relativePath": "lib/components/orbitals-loader/orbitalsloader.component.ts",
+                "test": false,
+                "name": "orbitalsloader.component.ts"
+            },
+            {
+                "relativePath": "lib/components/orbitals-loader/orbitalsloader.module.ts",
+                "test": false,
+                "name": "orbitalsloader.module.ts"
+            }
+        ],
+        "mainFile": "lib/components/orbitals-loader/index.ts",
+        "trackDir": "lib/components/orbitals-loader",
+        "origin": "AUTHORED",
+        "exported": true
+    },
+    "joshk.ng-spinners/[email protected]": {
         "files": [
             {
                 "relativePath": "lib/components/ring-loader/index.ts",
@@ -298,7 +331,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/ripple-loader@1.0.1": {
+    "joshk.ng-spinners/ripple-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/ripple-loader/index.ts",
@@ -331,7 +364,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/roller-loader@1.0.1": {
+    "joshk.ng-spinners/roller-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/roller-loader/index.ts",
@@ -364,7 +397,7 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "joshk.ng-spinners/spinner-loader@1.0.1": {
+    "joshk.ng-spinners/spinner-loader@1.1.0": {
         "files": [
             {
                 "relativePath": "lib/components/spinner-loader/index.ts",
@@ -397,5 +430,5 @@
         "origin": "AUTHORED",
         "exported": true
     },
-    "version": "14.2.6-dev.2"
+    "version": "14.3.0"
 }
diff --git a/README.md b/README.md
@@ -6,9 +6,11 @@
 [![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
 
 <p align="center">
-  <a href="https://bit.dev/joshk/ng-spinners"><img src="https://i.imagesup.co/images2/e5832341d5d3e440221cf80650042792a99e39f7.gif"></a>
+  <a href="https://bit.dev/joshk/ng-spinners"><img src="https://i.imagesup.co/images2/1990710a88808ee8914167c74f57e604c5ed91fe.gif"></a>
 </p>
-Amazing collection of pure CSS angular spinners components of css spinners for ajax or loading animation based on loading.io.  
+
+Amazing collection of Angular spinners components with pure css.  
+The Angular spinners are based on loading.io and from all over the web.
 
 - 💅No extra CSS imports
 - ✂️Zero dependencies

diff --git a/lib/README.md b/lib/README.md
@@ -6,9 +6,15 @@
 [![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
 
 <p align="center">
-  <a href="https://bit.dev/joshk/ng-spinners"><img src="https://i.imagesup.co/images2/e5832341d5d3e440221cf80650042792a99e39f7.gif"></a>
+  <a href="https://bit.dev/joshk/ng-spinners"><img src="https://i.imagesup.co/images2/1990710a88808ee8914167c74f57e604c5ed91fe.gif"></a>
 </p>
-Amazing collection of pure CSS angular spinners components of css spinners for ajax or loading animation based on loading.io.  
+
+Amazing collection of Angular spinners components with pure css.  
+The Angular spinners are based on loading.io and from all over the web.
+
+- 💅No extra CSS imports
+- ✂️Zero dependencies
+- 📦Spinners can be installing separately
 
 ## [Live Demo](https://bit.dev/joshk/ng-spinners)
 

diff --git a/lib/components/index.ts b/lib/components/index.ts
@@ -9,4 +9,5 @@ export { RingLoaderModule } from './ring-loader';
 export { DualRingLoaderModule } from './dualring-loader';
 export { HeartLoaderModule } from './heart-loader';
 export { RollerLoaderModule } from './roller-loader';
-export { EllipsisLoaderModule } from './ellipsis-loader';
+export { EllipsisLoaderModule } from './ellipsis-loader';
+export { OrbitalsLoaderModule } from './orbitals-loader';
diff --git a/lib/components/orbitals-loader/index.ts b/lib/components/orbitals-loader/index.ts
@@ -0,0 +1 @@
+export { OrbitalsLoaderModule } from './orbitalsloader.module';
diff --git a/lib/components/orbitals-loader/orbitalsloader.component.css b/lib/components/orbitals-loader/orbitalsloader.component.css
@@ -0,0 +1,117 @@
+.lds-orbitals {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-orbitals * {
+  --center: translate(-50%, -50%);
+}
+.lds-orbitals .center {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: var(--center);
+}
+.lds-orbitals .outer-spin,
+.lds-orbitals .inner-spin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.lds-orbitals .inner-arc {
+  position: absolute;
+  width: 31px;
+  height: 31px;
+  border-radius: 50%;
+  border: 3px solid;
+}
+.lds-orbitals .inner-arc_start-a {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(45deg);
+}
+.lds-orbitals .inner-arc_end-a {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(25deg);
+}
+.lds-orbitals .inner-moon-a {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transform: var(--center) translate(17px, 0);
+}
+.lds-orbitals .inner-moon-b {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transform: var(--center) translate(-17px, 0);
+}
+.lds-orbitals .inner-arc_start-b {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(65deg) scale(-1, -1);
+}
+.lds-orbitals .inner-arc_end-b {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(45deg) scale(-1, -1);
+}
+.lds-orbitals .outer-arc {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 3px solid;
+}
+.lds-orbitals .outer-arc_start-a {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(65deg);
+}
+.lds-orbitals .outer-arc_end-a {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(45deg);
+}
+.lds-orbitals .outer-moon-a {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  transform: var(--center) translate(32px, 0);
+}
+.lds-orbitals .outer-moon-b {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  transform: var(--center) translate(-32px, 0);
+}
+.lds-orbitals .outer-arc_start-b {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(65deg) scale(-1, -1);
+}
+.lds-orbitals .outer-arc_end-b {
+  border-color: transparent transparent transparent;
+  transform: var(--center) rotate(45deg) scale(-1, -1);
+}
+.lds-orbitals .outer-spin {
+  animation: spin 4s linear infinite;
+}
+.lds-orbitals .inner-spin {
+  animation: spin 3s linear infinite;
+}
+@keyframes spin {
+  100% {
+      transform: rotate(360deg);
+  }
+}
diff --git a/lib/components/orbitals-loader/orbitalsloader.component.html b/lib/components/orbitals-loader/orbitalsloader.component.html
@@ -0,0 +1,19 @@
+<div class="lds-orbitals">
+    <div class="center" [ngStyle]="{'background': color}"></div>
+    <div class="inner-spin">
+        <div class="inner-arc inner-arc_start-a" [ngStyle]="{'border-color': color}"></div>
+        <div class="inner-arc inner-arc_end-a" [ngStyle]="{'border-color': color}"></div>
+        <div class="inner-arc inner-arc_start-b" [ngStyle]="{'border-color': color}"></div>
+        <div class="inner-arc inner-arc_end-b" [ngStyle]="{'border-color': color}"></div>
+        <div class="inner-moon-a" [ngStyle]="{'background': color}"></div>
+        <div class="inner-moon-b" [ngStyle]="{'background': color}"></div>
+    </div>
+    <div class="outer-spin">
+        <div class="outer-arc outer-arc_start-a" [ngStyle]="{'border-color': color}"></div>
+        <div class="outer-arc outer-arc_end-a" [ngStyle]="{'border-color': color}"></div>
+        <div class="outer-arc outer-arc_start-b" [ngStyle]="{'border-color': color}"></div>
+        <div class="outer-arc outer-arc_end-b" [ngStyle]="{'border-color': color}"></div>
+        <div class="outer-moon-a" [ngStyle]="{'background': color}"></div>
+        <div class="outer-moon-b" [ngStyle]="{'background': color}"></div>
+    </div>
+</div>
diff --git a/lib/components/orbitals-loader/orbitalsloader.component.ts b/lib/components/orbitals-loader/orbitalsloader.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'orbitals-loader',
+  templateUrl: './orbitalsloader.component.html',
+  styleUrls: ['./orbitalsloader.component.css']
+})
+export class OrbitalsLoaderComponent {
+  @Input() color: string = '#7f58af';
+}
diff --git a/lib/components/orbitals-loader/orbitalsloader.module.ts b/lib/components/orbitals-loader/orbitalsloader.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OrbitalsLoaderComponent } from './orbitalsloader.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [OrbitalsLoaderComponent],
+  exports: [OrbitalsLoaderComponent]
+})
+export class OrbitalsLoaderModule { }
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-spinners",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "author": "JoshK2",
   "license": "MIT",
   "repository": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-spinners-project",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "author": "JoshK2",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,8 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "build:lib": "cp README.md lib/ && ng-packagr -p lib/package.json",
-    "deploy": "npm publish lib/dist"
+    "deploy:npm": "npm publish lib/dist",
+    "deploy:bit": "bit export joshk.ng-spinners"
   },
   "dependencies": {
     "@angular/common": "~8.1.2",

diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,3 +1,10 @@
+h1 {
+    text-align: center;
+}
+.normal-spinners {
+    display: flex;
+    justify-content: center;
+}
 .main {
     text-align: center;
     width: 820px;