How to add circular percentage around a Texture image Three.js

Question

I am trying to add circular percentage around Texture image. My image like this

My expected image will be like this border around image.

I am new in three.js I used SpriteMaterial due to I need image always in camera face. From basic I added image in scene like this code. I am not getting any clew how can I add such border for a image. if I could add svg with code that will be also helpful for me but I don't know how to add svg code here under image.

const map = new THREE.TextureLoader().load('img.png');

const material = new THREE.SpriteMaterial( { 
  map: map
} );

const mesh = new THREE.Sprite( material );

mesh.position.set(x,y,z);
mesh.scale.set( 0.2, 0.2,0.5);
scene.add(mesh);