'Bootstrap Input-Group with Spinner gives weird spinning D shape

I have a weird form that will, when you select Submit, send each line of input as a separate request. I want to put a spinner at the end of each line, which will spin until submission for that line is complete.

Technically this works without errors but instead of a nice round spinner I get this spinning "D" shape. I've tried adding padding/margin to the beginning of the spinner but am getting nowhere.

Help please? I'm not great with CSS.

Edit: Trying with both lastest Chrome and Brave.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <form id="morning_metrics" onsubmit="return false;">
    <div class="form-group col-4">
      <label for="metric_sleep">Hours of Sleep </label>
      <div class="input-group">
        <input id="metric_sleep" name="metric_sleep" class="form-control" type="number" />
        <div class="input-group-append spinner-border float-right">
          <span></span>
        </div>
      </div>
    </div>
    <button id="saveForm" class="btn btn-primary" type="button" name="submit" value="Submit">Submit</button>
  </form>
  </div>
</body>

</html>
htmlcssbootstrap-5


Solution 1:[1]

You can override default styling for the spinner that was set by Bootstrap. Just set border-radius property to 50%.

Solution 2:[2]

You should add the .rounded-circle class to fix this.

Placing it inside an .input-group-text may also help.

<span class="input-group-text">
  <span class="spinner-border"></span>
</span>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AhmCho
Solution 2

Related Questions