Html 如何创建具有渐变边框和透明度的CSS加载程序？

我正在尝试用HTML和CSS做一个加载器，我已经完成了加载器，但是当我在加载器的中心有信息时，出现了一个问题，信息没有显示，原因是因为我有背景：白色；我需要避免显示渐变，因为如果我移除白色并放置透明，渐变就会出现

因此，当装载机后面有东西时，我需要解决这个问题

.loader{
显示器：flex；
证明内容：中心；
位置：固定；
最高：50%；
左：50%；
z指数：10；
}
.加载器.圆圈{
背景图像：线性梯度（90度，#a03297，#e90b5a）；
宽度：80px；
高度：80px；
边框样式：实心；
边框颜色：透明；
边界半径：50%；
边框宽度：1px；
动画：线性无限；
填充：10px；
框大小：内容框；
}
.circle>div{
背景：白色；
身高：100%；
宽度：100%；
边框样式：实心；
边框颜色：透明；
边界半径：50%；
边框宽度：1px；
}
@关键帧腐烂{
0%{变换：旋转（0度）}
100%{变换：旋转（360度）；}
}

aaaaaaaaa ssssssçççççççççççççççççççççççççççççççççççç231


.loader{
背景：线性梯度（黄色，#e90b5a）；
/*仅显示距边框10像素的距离*/
-webkit面罩：径向梯度（最远侧，透明钙（100%-10px），#fff 0）；
遮罩：径向梯度（最远侧，透明钙（100%-10px），#fff 0）；
宽度：100px；
高度：100px；
边界半径：50%；
位置：固定；
顶部：calc（50%-50px）；
左：计算（50%-50px）；
动画：线性无限；
}
@关键帧腐烂{
100%{变换：旋转（360度）；}
}
身体{
背景：线性渐变（向右、灰色、白色）
}
请向我们展示一个隐藏文本和出现问题的示例。如果您现在有一个文本，您可以看到部分文本没有出现