JSFiddle - React, Tailwind, and code Playground
HTML
<div class="field-text"><input type="text" /></div>
CSS
@keyframes throbber {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.field-text {
position: relative;
display: table;
}
.field-text input {
padding: 0.5em;
min-width: 200px;
}
.field-text:after {
position: absolute;
top: 0.25em;
right: 0.25em;
content: "";
width: 20px;
height: 20px;
animation: throbber 2s infinite linear;
background-image: url('data:image/svg+xml;dataset=utf-8,%3Csvg%20class%3D%22throbber-svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20enable-background%3D%22new%200%200%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20class%3D%22throbber-group%22%3E%3Cpath%20class%3D%22arrow-1%22%20fill%3D%22%2340B6FF%22%20d%3D%22M17.793%2C4.108L14.24%2C3.219c-0.647-0.162-1.288%2C0.24-1.424%2C0.893l-0.748%2C3.585c-0.136%2C0.653%2C0.215%2C0.897%2C0.78%2C0.543l1.656-1.038L14.6%2C7.171c0.704%2C1.161%2C0.983%2C2.576%2C0.641%2C3.997c-0.607%2C2.504-2.897%2C4.154-5.372%2C4.049c-0.569-0.024-0.62%2C0.463-0.62%2C0.463l-0.3%2C1.241c0%2C0-0.198%2C0.471%2C0.47%2C0.527c3.676%2C0.307%2C7.132-2.052%2C8.024-5.748c0.489-2.024%2C0.102-4.054-0.907-5.704l0.028-0.086l1.379-0.864C18.507%2C4.692%2C18.44%2C4.27%2C17.793%2C4.108z%22%2F%3E%3Cpath%20class%3D%22arrow-1%22%20fill%3D%22%2340B6FF%22%20d%3D%22M7.228%2C11.636l-1.644%2C1.031L5.544%2C12.68c-0.704-1.161-0.983-2.576-0.641-3.997c0.607-2.504%2C2.897-4.154%2C5.372-4.049c0.569%2C0.024%2C0.62-0.463%2C0.62-0.463l0.3-1.241c0%2C0%2C0.198-0.471-0.47-0.527C7.05%2C2.095%2C3.594%2C4.454%2C2.702%2C8.15c-0.489%2C2.024-0.102%2C4.054%2C0.907%2C5.704l-0.021%2C0.065L2.134%2C14.83c-0.565%2C0.354-0.498%2C0.777%2C0.149%2C0.939l3.553%2C0.889c0.647%2C0.162%2C1.288-0.24%2C1.424-0.893l0.748-3.585C8.144%2C11.526%2C7.793%2C11.282%2C7.228%2C11.636z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-position: 0 0;
background-repeat: no-repeat;
}