我想在输入标签中显示旋转器/加载器，加载器的位置不应该根据屏幕大小而改变。
我的完整代码:
<html>
<style>
input[type=text]{
position: relative;
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-radius: 50% ;
border-top: 5px solid #3498db;
width: 25px;
height: 25px;
animation: spinner 1s ease infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<body>
<div>
<label for="fname">First Name</label>
<input type="text" name="firstname" class="loader" placeholder="Your name"/>
</div>
</body>
</html>
但是我得到的只是一个旋转的输入字段，而不是字段内的loader。
你应该在你的输入中添加一些动画资源。你可以试试:
<html>
<style>
input[type=text]{
position: relative;
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.loading {
background-color: #ffffff;
background-image: url("https://i.gifer.com/ZZ5H.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}
</style>
<body>
<div>
<label for="fname">First Name</label>
<input type="text" name="firstname" class="loading" placeholder="Your name"/>
</div>
</body>