akserg / ng2-slim-loading-bar

Angular 2 component shows slim loading bar at the top of the page.
MIT License
358 stars 93 forks source link

New Angular2 RC5 Transition Bug #13

Closed serkandyck closed 8 years ago

serkandyck commented 8 years ago

New RC5 Router with added but transition not effect this way construct

`export class AppComponent implements OnInit, OnDestroy { private sub: Subscription;

constructor(private slimLoader: SlimLoadingBarService, private router: Router) {}

ngOnInit() {
    this.runSlimLoader();
   this.sub = this.router.events.subscribe(events => {
        this.runSlimLoader();
    }, (error: any) => {
        this.slimLoader.complete();
    });
}
runSlimLoader() {
    this.slimLoader.start();
    setTimeout(() => {
        this.slimLoader.complete();
    }, 1000);
}

ngOnDestroy() {
this.sub.unsubscribe();

}

}`

serkandyck commented 8 years ago

This problem solved missing css

.slim-loading-bar { position: fixed; margin: 0; padding: 0; top: 0; left: 0; right: 0; z-index: 99999; }

/* Styling for the Slim Loading Progress Bar itself / .slim-loading-bar-progress { margin: 0; padding: 0; z-index: 99998; background-color: green; color: green; box-shadow: 0 0 10px 0; / Inherits the font color */ height: 2px; opacity: 0;

/* Add CSS3 styles for transition smoothing */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}