Scaling loading bar not works correctly

[diesel94]

Bowmasters.Preloader = function(game){

};

Bowmasters.Preloader.prototype = {
    preload: function() {
        let logo = this.add.sprite(this.game.world.centerX -120, this.game.world.centerY - 100, 'logo').scale.setTo(scaleRatio, scaleRatio);

        let bar = this.add.sprite(this.game.world.centerX-300,this.game.world.centerY, 'bar');

        bar.scale.setTo(scaleRatio, scaleRatio);

        //without next line loading sprite looks good, not cropped
        this.load.setPreloadSprite(bar);

        this.load.image('background', 'assets/Resources/BG/bm_bg.png');
        this.load.image('ground', 'assets/Resources/BG/bm_ground.png');
        this.load.image('icon_thor', 'assets/Resources/UI/icon_thor_odinson.png');
        this.load.image('icon_loki', 'assets/Resources/UI/icon_upgrade_loki.png');


    },
    create: function() {
        this.state.start('Game');
    }
};

 

 

this.load.setPreloadSprite(bar)   sprite looks good.

 

After using bar.scale.setTo it becomes like:

 

This is my code, i am gonna to create loadind scene but i have a problem with loading bar. This was too big, and when i try to scale it becomes cropped  as on the screenshots. Give me the hint please how to repair it.