0

I have some delay on image loading time that time I want show a spinner and after image loading time that spinner should hide. What is the correct way to implement this in angular 2 platform. 

        <div id='panId' class="container-fluid" >

This is the images loading,

            <img name="imageName1" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)" (mouseWheelDown)="mouseWheelDownFunc()" 

                *ngIf="showImage" id="mainImage" src="{{imageVisible ? droppedImage: firtsImageToBind}}" class="imagepics mg-image "

                alt="loading..." />


            <img  name="imageName2" id="mainImage" mouseWheel style.width="{{imgWidth}}" (mouseWheelUp)="mouseWheelUpFunc($event)"

                (mouseWheelDown)="mouseWheelDownFunc()" class="mg-image " *ngIf="zoomImageVisible" src="{{zoomedImage}}">
        </div>


</div>
Sivam
  • 11
  • 2
  • 4
  • There are several questions on SO discussing the use of spinners/loading indicators in Angular2 e.g. [here](http://stackoverflow.com/questions/38144655/angular-2-loader-on-each-http-request). See if those can point you in the right direction – Garth Mason Mar 17 '17 at 06:20

1 Answers1

1

take a look at PrimeNG they have spinner and it's open source so you can just use it.

http://primefaces.org/primeng

https://github.com/primefaces/primeng

https://github.com/primefaces/primeng/tree/master/components/spinner

Mertcan Diken
  • 14,483
  • 2
  • 26
  • 33