Html 如何在悬停时从左向右移动装载机？

我有一个简单的div，其中有一个带有4个跨距的标记和一个文本 我正在尝试创建一个悬停在我的名字上的加载程序。 顶线从左到右移动，经过半路后，它在中间得到支撑而不隐藏。 下面是一段youtube视频： https://www.youtube.com/watch?v=ex7jGbyFgpA&t=156s

代码也随附。请帮忙

.name{
//字号：6rem；
保证金：03.5雷姆；
颜色：#2196f3；
位置：相对位置；
显示：内联块；
填充：15px 30px；
文本转换：大写；
字母间距：0px；
文字装饰：无；
溢出：隐藏；
过渡：0.2s；
字体大小：24px；
}
.嗨{
保证金：0；
填充：0；
显示器：flex；
对齐项目：居中；
最小高度：100vh；
}
跨度{
位置：绝对位置；
显示：块；
}
第n个孩子（1）{
排名：0；
左-100%；
宽度：100%；
高度：2倍；
背景：线性梯度（90度，透明，#2196f3）；
}
a:悬停范围：第n个子项（1）{
左：100px；
`在此处输入代码`转换：1s；
}

---

删除

边距：03.5rem

更改<代码>左侧：-10000%按
左键：-100%

查看下面的演示
（不要忘记在react组件中按类名更改类）


a.name{
位置：相对位置；
显示：内联块；
填充：15px 30px；
颜色：#6600FF；
字母间距：4px；
文字装饰：无；
文本转换：大写；
字体大小：24px；
溢出：隐藏；
过渡：0.2s；
}
a、 名称范围{
位置：绝对位置；
显示：块；
}
a、 姓名跨度：第n个孩子（1）{
排名：0；
左-100%；
宽度：100%；
高度：2倍；
背景：线性梯度（90度，透明，#2196f3）
}
a、 名称：悬停范围：第n个子项（1）{
左：100%；
过渡：1s；
}

请用文本插入您的css代码，但不要插入图片。@s.kuznetsov请立即检查这在react中不起作用。但它在这里工作它和react一起工作，用react demo检查我的编辑。像charm一样工作。谢谢