Home / Questions / 245014
Accepted
EMCode
Asked: 2020-03-13 07:58:37 +0800 CST 2020-03-13 07:58:37 +0800 CST

Bootstrap spinner inside input submit

  • 772

How do I add the spinner inside the input submit?

What I want is to place it on the left side of the text, I thought it was something simple, but I've been thinking about it for a long time (literally lol) and I can't include it.

The function of the submit is to send the login data from a simple login form.

input[type="submit"] {
  background: #d81921;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  width: 200px;
  border: none;
  border-radius: .5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<input type="submit" name="Enviar" value="Ingresar"><span class="spinner-border" role="status"></span>

css

1 Answers

  1. Best Answer

    You can achieve it using position: absolute;like this:

    input[type="submit"] {
  background: #d81921;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  width: 200px;
  border: none;
  border-radius: .5rem;
}

span.spinner-border {
  position: absolute;
    top: 5px;
    left: 260px;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<input type="submit" name="Enviar" value="Ingresar"><span class="spinner-border" role="status"></span>

    • 2