The Bootstrap Input-Group with Spinner displays an unusual spinning shape that resembles the letter D

I am encountering an issue with a unique form that sends each line of input as a separate request upon submission. I am looking to add a spinner at the end of each line, but I am facing a problem where instead of a circular spinner, I am getting a spinning "D" shape. I have attempted to adjust padding/margin for the spinner, but have not been successful in resolving the issue. Can anyone offer assistance? CSS is not my strong suit.

Edit: I have tested this on both the latest versions of Chrome and Brave.

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

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f6e9f4">[email protected]</a>/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308170815">[email protected]</a>/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>

Answer №1

To customize the appearance of the spinner, you can override the default styling defined by Bootstrap. Simply adjust the border-radius property to 50%.

Answer №2

To resolve this issue, make sure to apply the .rounded-circle class.

Additionally, including it within an element with the .input-group-text class might be beneficial.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with full-width elements on mobile devices

I've got a pretty basic question here but can't seem to find a straightforward answer. I'm using Bootstrap to style a website and struggling with making it mobile-responsive. Following the given answer, I used this code to show a button ne ...

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

I am looking to efficiently manage localStorage using checkboxes. When a checkbox is checked, I want to add the corresponding value to localStorage, and remove it when unchecked. var selectedModes = new Array(); $('.play_mode').on('click& ...

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...

Ways to create a sequential appearance of elements through CSS animations

Can you help me achieve a wave effect for elements appearing one by one using CSS animation (jQuery)? Currently, all the elements show up at once and I want to create a wave-like motion. Any assistance would be greatly appreciated. $(window ...

How to keep Vuetify component at the top of the v-layout?

https://i.stack.imgur.com/cKdsk.png I am in the process of creating a website using vuetify and nuxt. My goal is to specify the max-width property for the expansion panel UI component (https://vuetifyjs.com/en/components/expansion-panels). Here is my curr ...

various designs for multi-location infrastructure in angular js

Our angular app is designed with a multi-site architecture, where the base URL of each domain varies. Each site requires a unique header and footer to be incorporated, along with custom CSS and links specific to that site. Is there a way to dynamically in ...

Where do JQuery and framesets vanish to?

Whenever I attempt to use the console to create an element with the tag frameset, it returns no result: $('<div id="content" data-something="hello" />') => [<div id=​"content" data-something=​"hello">​</div>​] $(&apo ...

JSON failing to show all values sent as a string

In a div element there is a table with 3 rows, a textarea, and a button. The JSON data populates the first 3 rows correctly but the textarea remains blank. My goal is to display the previous record from the database in the textarea. function ChangeLoadin ...

Whenever I change the value of a textbox using plain JavaScript, the text becomes hidden from view

I'm struggling to understand why this function is making the textbox value invisible. I attempted changing the hidden field to a visible field, but that didn't solve the issue. Would appreciate some guidance. Here's the complete page code, p ...

Convert JSON data into a nested unordered list

I need help converting a JSON object into an unordered list using jQuery. Here's the JSON data I have: var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3&bs ...

Discovering all invalid elements in an Angular 8 Form using Typescript by revealing required fields post button click

Once the button is clicked, I want to retrieve all invalid elements in the Form and showcase those fields that are either incomplete or required. ...

Can you provide examples of design patterns commonly used in HTML and CSS?

Starting out with Ruby on Rails is exciting, but I am feeling overwhelmed by CSS and HTML. While there are plenty of books on CSS and HTML patterns, I am more interested in learning what is actually used on real webpages. For example, when creating a simpl ...

Creating a variable in JavaScript

In my HTML body, I have set up a global variable named index with the value <%var index = 0;%>. This allows me to access it throughout the code. I'm trying to assign the value of $(this).val() to <% index %>, but I can't seem to get ...

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

What are the indicators of JSON in a response?

When using ReactJS to make a fetch request to an API, the JSON body response includes the following: { "place": <a href=\"http:\/\/place.com\/ search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<&b ...

Exploring the process of implementing smooth transitions when toggling between light and dark modes using JavaScript

var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...

The product image does not display any other images

Hey, I'm experiencing an issue and need help replicating the photo changing effect on this website: I've managed to do everything right except for the photo changing feature (1 / 2 / 3 / 4)!! Here's what I have so far: Can anyone assist m ...

Tips for wrapping the content of a <span> element within a <td> element

Can someone help me figure out how to wrap the content of a <span> tag that is inside a <td>? The style I have applied doesn't seem to be working. Here's the code snippet: <td style="white-space:nowrap;border:1px solid black"> ...

Offering various language options on a website determined by the URL

I've been contemplating how to add multi-language support to my personal website, which I developed using ExpressJS and NodeJS with EJS as the template engine. Currently, the website is only available in English, but I want to add a German version as ...

Pressing the button results in no action

I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...