How to apply semi-transparent white color to outline of circle wipe

Question

A goal for this question is that outline of my circle wipe improves like left exmple in the image below. So far outline of my circle wipe does not have two clear semi-transparent rings. If you know how to render them like the left image, would you give me some advice?

An ideal circle wipe I would like to implement.

Ideal circle wipe video

Here's the shader I use.

Shader "Unlit/CircleWipe"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _FadeTex("Fade Texture", 2D) = "white" {}
         _Radius("Wipe Radius", Float) = 0
         _Horizontal("Horizontal ratio", Float) = 1
         _Vertical("Vertical ratio", Float) = 1
         _RadiusSpeed("Radius Speed", Float) = 1
         _CenterX("Center X",  Range(0.0, 1.0)) = 0.5
         _CenterY("Center Y",  Range(0.0, 1.0)) = 0.5
         [HDR]_FadeColour("Fade Colour", Color) = (1,1,1,0)
         _Offset("Offset", Vector) = (0,0,0,0)
     }
     SubShader
     {
         Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
         Blend SrcAlpha OneMinusSrcAlpha


     Pass
     {
         CGPROGRAM
         #pragma vertex vert
         #pragma fragment frag
         #pragma multi_compile_fog

         #include "UnityCG.cginc"

         struct appdata
         {
             float4 vertex : POSITION;
             float2 uv : TEXCOORD0;
         };

         struct v2f
         {
             float2 uv : TEXCOORD0;
             UNITY_FOG_COORDS(1)
             float4 vertex : SV_POSITION;
         };

         sampler2D _MainTex;
         sampler2D _FadeTex;
         float4 _MainTex_ST;
         float _Radius;
         float _Horizontal;
         float _Vertical;
         float _RadiusSpeed;
         float _CenterX;
         float _CenterY;
         fixed4 _FadeColour : COLOR;
         float4 _Offset;

         v2f vert (appdata v)
         {
             v2f o;
             o.vertex = UnityObjectToClipPos(v.vertex);
             o.uv = TRANSFORM_TEX(v.uv, _MainTex);
             UNITY_TRANSFER_FOG(o,o.vertex);
             return o;
         }

         fixed4 frag(v2f i) : SV_Target
         {
             fixed4 topCol = tex2D(_MainTex , i.uv);
             fixed4 fadeCol = _FadeColour * tex2D(_FadeTex , i.uv);
             float2 center = float2(_CenterX , _CenterY);
             float2 pos = i.uv.xy;
             float dist = length((pos - center) * float2(_Vertical , _Horizontal));
             return lerp(fadeCol , topCol , smoothstep(_Radius , _Radius + 1.1 , dist));
         }
         ENDCG
     }
 }
 }

Comparison

Environment
Unity2020.3f
Project type: Universal render pipeline
Target: IOS & Android

Answer 1

float a = smoothstep(_Radius - 1.1, _Radius, dist);
float b = smoothstep(_Radius, _Radius + 1.1, dist);
float t = a - b;
fixed4 col = lerp(fadeCol , topCol , b);
return lerp(col, _FadeColour, t);

You may also try to replace the last line with:

return col + _FadeColour * t;

---

Effect achieved with 2 pictures: