Skip to content

Commit 1993c78

Browse files
mpalourdiompalourdio
committed
Add possibility to customize the spinner and its background-color
1 parent d8cf662 commit 1993c78

13 files changed

+544
-94
lines changed

‎README.MD‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ $ npm install ng-http-loader --save
1212

1313
## What does it do ?
1414

15-
This package provides an HTTP Interceptor, and a spinner component. The HTTP interceptor listens to all HTTP requests
16-
and shows a spinner during pending requests.
15+
This package provides an HTTP Interceptor, and a spinner component (All from [SpinKit](https://github.com/tobiasahlin/SpinKit) at the moment).
16+
The HTTP interceptor listens to all HTTP requests and shows a spinner during pending requests.
1717

1818
## Usage
1919

@@ -45,6 +45,13 @@ In your app.component.html, add :
4545
<spinner></spinner>
4646
```
4747

48+
You can too customize the background-color and the spinner type :
49+
```xml
50+
<spinner [backgroundColor]="'#ff0000'" [spinner]="Spinkit.skWave"></spinner>
51+
```
52+
53+
The different spinners avalaible are referenced in [this class](src/app/spinkits.ts).
54+
4855
Then, in order to have this module listening to your http requests, replace all the ``@angular/http`` usages by [http: HttpInterceptorService](src/app/http-interceptor.service.ts).
4956

5057
## Requirements

‎src/app/spinkits.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
3+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
4+
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
5+
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
6+
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
7+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8+
*/
9+
10+
export const Spinkit = {
11+
skChasingDots: 'sk-chasing-dots',
12+
skCubeGrid: 'sk-cube-grid',
13+
skDoubleBounce: 'sk-double-bounce',
14+
skRotatingPlane: 'sk-rotationg-plane',
15+
skSpinnerPulse: 'sk-spinner-pulse',
16+
skThreeBounce: 'sk-three-bounce',
17+
skWanderingCubes: 'sk-wandering-cubes',
18+
skWave: 'sk-wave',
19+
};
20+

‎src/app/spinner/sk-chasing-dots.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.sk-chasing-dots {
2+
top: 50%;
3+
margin: auto;
4+
width: 40px;
5+
height: 40px;
6+
position: relative;
7+
text-align: center;
8+
-webkit-animation: sk-chasingDotsRotate 2s infinite linear;
9+
animation: sk-chasingDotsRotate 2s infinite linear;
10+
}
11+
12+
.sk-chasing-dots .sk-child {
13+
width: 60%;
14+
height: 60%;
15+
display: inline-block;
16+
position: absolute;
17+
top: 0;
18+
border-radius: 100%;
19+
-webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
20+
animation: sk-chasingDotsBounce 2s infinite ease-in-out;
21+
}
22+
23+
.sk-chasing-dots .sk-dot2 {
24+
top: auto;
25+
bottom: 0;
26+
-webkit-animation-delay: -1s;
27+
animation-delay: -1s;
28+
}
29+
30+
@-webkit-keyframes sk-chasingDotsRotate {
31+
100% {
32+
-webkit-transform: rotate(360deg);
33+
transform: rotate(360deg);
34+
}
35+
}
36+
37+
@keyframes sk-chasingDotsRotate {
38+
100% {
39+
-webkit-transform: rotate(360deg);
40+
transform: rotate(360deg);
41+
}
42+
}
43+
44+
@-webkit-keyframes sk-chasingDotsBounce {
45+
0%, 100% {
46+
-webkit-transform: scale(0);
47+
transform: scale(0);
48+
}
49+
50% {
50+
-webkit-transform: scale(1);
51+
transform: scale(1);
52+
}
53+
}
54+
55+
@keyframes sk-chasingDotsBounce {
56+
0%, 100% {
57+
-webkit-transform: scale(0);
58+
transform: scale(0);
59+
}
60+
50% {
61+
-webkit-transform: scale(1);
62+
transform: scale(1);
63+
}
64+
}

‎src/app/spinner/sk-cube-grid.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.sk-cube-grid {
2+
position: relative;
3+
top: 50%;
4+
width: 40px;
5+
height: 40px;
6+
margin: auto;
7+
}
8+
9+
.sk-cube-grid .sk-cube {
10+
width: 33%;
11+
height: 33%;
12+
float: left;
13+
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
14+
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
15+
}
16+
17+
.sk-cube-grid .sk-cube1 {
18+
-webkit-animation-delay: 0.2s;
19+
animation-delay: 0.2s;
20+
}
21+
22+
.sk-cube-grid .sk-cube2 {
23+
-webkit-animation-delay: 0.3s;
24+
animation-delay: 0.3s;
25+
}
26+
27+
.sk-cube-grid .sk-cube3 {
28+
-webkit-animation-delay: 0.4s;
29+
animation-delay: 0.4s;
30+
}
31+
32+
.sk-cube-grid .sk-cube4 {
33+
-webkit-animation-delay: 0.1s;
34+
animation-delay: 0.1s;
35+
}
36+
37+
.sk-cube-grid .sk-cube5 {
38+
-webkit-animation-delay: 0.2s;
39+
animation-delay: 0.2s;
40+
}
41+
42+
.sk-cube-grid .sk-cube6 {
43+
-webkit-animation-delay: 0.3s;
44+
animation-delay: 0.3s;
45+
}
46+
47+
.sk-cube-grid .sk-cube7 {
48+
-webkit-animation-delay: 0s;
49+
animation-delay: 0s;
50+
}
51+
52+
.sk-cube-grid .sk-cube8 {
53+
-webkit-animation-delay: 0.1s;
54+
animation-delay: 0.1s;
55+
}
56+
57+
.sk-cube-grid .sk-cube9 {
58+
-webkit-animation-delay: 0.2s;
59+
animation-delay: 0.2s;
60+
}
61+
62+
@-webkit-keyframes sk-cubeGridScaleDelay {
63+
0%, 70%, 100% {
64+
-webkit-transform: scale3D(1, 1, 1);
65+
transform: scale3D(1, 1, 1);
66+
}
67+
35% {
68+
-webkit-transform: scale3D(0, 0, 1);
69+
transform: scale3D(0, 0, 1);
70+
}
71+
}
72+
73+
@keyframes sk-cubeGridScaleDelay {
74+
0%, 70%, 100% {
75+
-webkit-transform: scale3D(1, 1, 1);
76+
transform: scale3D(1, 1, 1);
77+
}
78+
35% {
79+
-webkit-transform: scale3D(0, 0, 1);
80+
transform: scale3D(0, 0, 1);
81+
}
82+
}

‎src/app/spinner/sk-double-bounce.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.sk-double-bounce {
2+
top: 50%;
3+
width: 40px;
4+
height: 40px;
5+
position: relative;
6+
margin: auto;
7+
}
8+
9+
.double-bounce1, .double-bounce2 {
10+
width: 100%;
11+
height: 100%;
12+
border-radius: 50%;
13+
opacity: 0.6;
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
18+
animation: sk-bounce 2.0s infinite ease-in-out;
19+
}
20+
21+
.double-bounce2 {
22+
-webkit-animation-delay: -1.0s;
23+
animation-delay: -1.0s;
24+
}
25+
26+
@-webkit-keyframes sk-bounce {
27+
0%, 100% {
28+
-webkit-transform: scale(0.0)
29+
}
30+
50% {
31+
-webkit-transform: scale(1.0)
32+
}
33+
}
34+
35+
@keyframes sk-bounce {
36+
0%, 100% {
37+
transform: scale(0.0);
38+
-webkit-transform: scale(0.0);
39+
}
40+
50% {
41+
transform: scale(1.0);
42+
-webkit-transform: scale(1.0);
43+
}
44+
}

‎src/app/spinner/sk-rotating-plane.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.sk-rotating-plane {
2+
position: relative;
3+
top: 50%;
4+
width: 40px;
5+
height: 40px;
6+
margin: auto;
7+
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
8+
animation: sk-rotateplane 1.2s infinite ease-in-out;
9+
}
10+
11+
@-webkit-keyframes sk-rotateplane {
12+
0% {
13+
-webkit-transform: perspective(120px)
14+
}
15+
50% {
16+
-webkit-transform: perspective(120px) rotateY(180deg)
17+
}
18+
100% {
19+
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
20+
}
21+
}
22+
23+
@keyframes sk-rotateplane {
24+
0% {
25+
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
26+
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
27+
}
28+
50% {
29+
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
30+
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
31+
}
32+
100% {
33+
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
34+
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
35+
}
36+
}

‎src/app/spinner/sk-spinner-pulse.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.sk-spinner-pulse {
2+
position: relative;
3+
top: 50%;
4+
width: 40px;
5+
height: 40px;
6+
margin: auto;
7+
border-radius: 100%;
8+
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
9+
animation: sk-pulseScaleOut 1s infinite ease-in-out;
10+
}
11+
12+
@-webkit-keyframes sk-pulseScaleOut {
13+
0% {
14+
-webkit-transform: scale(0);
15+
transform: scale(0);
16+
}
17+
100% {
18+
-webkit-transform: scale(1);
19+
transform: scale(1);
20+
opacity: 0;
21+
}
22+
}
23+
24+
@keyframes sk-pulseScaleOut {
25+
0% {
26+
-webkit-transform: scale(0);
27+
transform: scale(0);
28+
}
29+
100% {
30+
-webkit-transform: scale(1);
31+
transform: scale(1);
32+
opacity: 0;
33+
}
34+
}

‎src/app/spinner/sk-three-bounce.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.sk-three-bounce {
2+
top: 50%;
3+
position: relative;
4+
margin: auto;
5+
width: 80px;
6+
text-align: center;
7+
}
8+
9+
.sk-three-bounce .sk-child {
10+
width: 20px;
11+
height: 20px;
12+
border-radius: 100%;
13+
display: inline-block;
14+
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
15+
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
16+
}
17+
18+
.sk-three-bounce .sk-bounce1 {
19+
-webkit-animation-delay: -0.32s;
20+
animation-delay: -0.32s;
21+
}
22+
23+
.sk-three-bounce .sk-bounce2 {
24+
-webkit-animation-delay: -0.16s;
25+
animation-delay: -0.16s;
26+
}
27+
28+
@-webkit-keyframes sk-three-bounce {
29+
0%, 80%, 100% {
30+
-webkit-transform: scale(0);
31+
transform: scale(0);
32+
}
33+
40% {
34+
-webkit-transform: scale(1);
35+
transform: scale(1);
36+
}
37+
}
38+
39+
@keyframes sk-three-bounce {
40+
0%, 80%, 100% {
41+
-webkit-transform: scale(0);
42+
transform: scale(0);
43+
}
44+
40% {
45+
-webkit-transform: scale(1);
46+
transform: scale(1);
47+
}
48+
}

0 commit comments

Comments
 (0)