FX

package imageloader;
import javafx.scene.image.*;
import javafx.scene.shape.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.animation.*;

public class ImageLoadingSpinner extends CustomNode {
    public-init var image:Image;
    public-init var width:Integer = 50;
    public-init var height:Integer = 50;
    
    var spinnerAnim:Timeline;
    var fadeAnim:Timeline;
    var progress = bind image.progress on replace {
        if(progress >= 100) {
            fadeAnim.play();
        }
    }
    
    override public function create():Node {
        var angle = 0;
        var spinner = Group {
            content: [
                // grey background
                Rectangle { width: width height: height fill: Color.DARKGRAY },
                //spinning circles
                Group {
                    translateX: width/2
                    translateY: height/2
                    content: for(n in [0..3]) {
                        Circle { fill: Color.rgb(255,255,255,0.5)
                            transforms: bind Transform.rotate(angle+n*90,0,0)
                            centerX: 30 centerY: 30 radius: 50
                        }
                    }
                }
            ]
        };
        
        spinnerAnim = Timeline {
            repeatCount: Timeline.INDEFINITE
            keyFrames: [
                at(0s) { angle => 0 tween Interpolator.LINEAR },
                at(2s) { angle => 360 tween Interpolator.LINEAR }
            ]
        };
        spinnerAnim.play();
        fadeAnim = Timeline {
            keyFrames: [
                at(0s) { spinner.opacity => 1.0 tween Interpolator.LINEAR },
                KeyFrame { 
                    time: 0.5s values: spinner.opacity => 0.0 tween Interpolator.LINEAR
                    action: function():Void { spinnerAnim.stop(); }
                    },
                ]
        };
        
        return Group {
            content: [ ImageView { image: image }, spinner ]
        }
    }
}