Skip to content
Permalink
Browse files

loading spinner

  • Loading branch information...
Alejandro Mur
Alejandro Mur committed Dec 21, 2018
1 parent fdc6fc1 commit a6aff8c08c0489cb45e0ba7fbda8c4027d1ef79d
@@ -1,7 +1,9 @@
<ng-container *ngIf="albumsList; else noAlbums">
<div class="wrapper">
<collection-album *ngFor="let album of albumsList | sort : 'id'" [album]="album"></collection-album>
</div>
<ng-container *ngIf="albumsList; else loading">
<ng-container *ngIf="!emptyList; else noAlbums">
<div class="wrapper">
<collection-album *ngFor="let album of albumsList | sort : 'id'" [album]="album"></collection-album>
</div>
</ng-container>
</ng-container>

<ng-template #noAlbums>
@@ -98,3 +100,12 @@ <h1>No hay discos</h1>
</ul>
</article>
</ng-template>

<ng-template #loading>
<article class="default-page">
<div class="spinner">
<div class="spinner__circle"></div>
<div class="spinner__circle"></div>
</div>
</article>
</ng-template>
@@ -9,13 +9,20 @@ import { AlbumService } from '../../../services/album.service';
})
export class AlbumsListComponent implements OnInit {

emptyList = true;

albumsList: AlbumModel[];

constructor(private albumService: AlbumService) { }

ngOnInit() {
// console.log('pido discos');
this.albumService.getAlbums().snapshotChanges().subscribe(item => {

if (item.length > 0) {
this.emptyList = false;
}

this.albumsList = [];
item.forEach(element => {
const x = element.payload.toJSON();
@@ -0,0 +1,21 @@
.spinner {
width: 2rem;
height: 2rem;
position: relative;
}

.spinner__circle {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
animation: spinner 2000ms infinite ease-in-out;

& + & {
animation-delay: -1000ms;
}
}
@@ -2,8 +2,19 @@
50% {
opacity: 0;
}

100% {
opacity: 1;
transform: translate(0,0);
transform: translate(0, 0);
}
}

@keyframes spinner {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@@ -25,6 +25,7 @@

// Components
// ------------
@import './scss/components/spinner';
@import './scss/components/disclaimer';
@import './scss/components/buttons';
@import './scss/components/forms';

0 comments on commit a6aff8c

Please sign in to comment.
You can’t perform that action at this time.