how to move the loader from left to right on hover? - html

Question

I have a simple div in which there is an tag with 4 spans and a text
I am trying to create a loader on hovering my name.
The top line moves from left to right, after passing half way it get stucks in the middle and does not hides.
I am following a short youtube video:
https://www.youtube.com/watch?v=ex7jGbyFgpA&t=156s
The code is also attached. Please help
.name {
// font-size: 6rem;
margin: 0 0 3.5rem;
color: #2196f3;
position: relative;
display: inline-block;
padding: 15px 30px;
text-transform: uppercase;
letter-spacing: 0px;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
font-size: 24px;
}
.hi {
margin: 0;
padding: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #2196f3);
}
a:hover span:nth-child(1) {
left: 100px;
`enter code here` transition: 1s;
}
<div>
<a href='#' className='name'>
<span></span>
<span></span>
<span></span>
<span></span> Hafiz Arsam Rahmaan
</a>
</div>

Answer 1

Delete margin: 0 0 3.5rem;
Change left: -10000%; by left: -100%;
Check the demo below
(Don't forget to change class by className in your react component)
a.name {
position: relative;
display: inline-block;
padding: 15px 30px;
color: #6600FF;
letter-spacing: 4px;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a.name span {
position: absolute;
display: block;
}
a.name span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #2196f3)
}
a.name:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
<div>
<a href='#' class='name'>
<span></span>
<span></span>
<span></span>
<span></span>
Hafiz Arsam Rahmaan
</a>
</div>
Demo with react: Stackblitz