Bootstrap Input-Group with Spinner gives weird spinning D shape
Question
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/bootstrap@5.1.3/dist/css/bootstrap.min:css" /> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
2 answers
solution1
2 ACCPTED 2021-10-20 17:23:21
You can override default styling for the spinner that was set by Bootstrap. Just set border-radius property to 50%.
solution2
0 2022-04-11 08:53:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.