Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar:

https://i.stack.imgur.com/o75Lp.png

This is the code for my navbar: 

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a ng-click="reloadPage()" class="navbar-brand" href="/"><img style="margin-top: -15px;" width="192"
                                                                  height="49" src="packages/img/logo-trans.jpg"</a>
    <ul class="nav navbar-nav">
        <li class=""><a target="_self" ng-click="openTabs()" style="cursor: pointer;">DRAFT: Opened <span
                class="badge"><% tabService.tabs.length %></span></a></li>
        <li class=""><a target="_self" ng-click="test()" style="cursor: pointer;">LEADS: New <span
                class="badge">0</span></a></li>
        <li class="" ng-show="!htLoading"><a target="_self">AHT: <% htValues.aht | secondsToDateTime %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">EHT: <% htValues.eht | secondsToDateTime %> </a>
        </li>
        <li ng-show="htLoading" >
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">ABuffer: <% htValues.buffer | secondsToDateTime
            %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
    </ul>
</div>

Currently, when the data for AHT, EHT, and ABuffer are not loaded yet, glyphicons appear using the "htLoading" directive in AngularJS. However, they are not centered within each list element like I would prefer. How can I achieve centering these loaders? Is it feasible?

htmlcssangularjstwitter-bootstrap-3

Answer №1

Implementing flexbox can help achieve this design

ul.nav{
  display: flex;
  justify-content: space-between; /* evenly spaces all li items*/
}

One of the benefits of utilizing flexbox is that it automatically adjusts to accommodate varying content lengths when loading dynamic data.

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

Error: myFunction has not been declared

Can anyone figure out what's going on here? http://jsfiddle.net/sVT54/ <button onclick="myFunction()">Click me</button> <p id="demo"></p> function myFunction() { document.getElementById("demo").innerHTML="Hello World"; } ...

javascripthtml

Creating a personalized audio player using HTML

I have created a design for an audio player that I would like to implement using the HTML audio player element. When I tried <audio></audio>, it just displayed the default player: Is there a way to customize the style of the player to match t ...

javascriptcsshtmlhtml5-audio

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

PHP, CURL, JSON, AJAX, and HTML - unable to fetch the required data

I am faced with the challenge of transferring data from server 2 to server 1, filling up a form, and submitting it without redirecting the user to server 1. Once the form is submitted, I need the PHP script on server 1 to be executed and send back the resu ...

phphtmlajaxjsoncurl

Obtain the latitude and longitude data in JSON format by utilizing Google Maps' auto-complete feature with AngularJS

What is the method for retrieving latitude and longitude in JSON format from Google Maps autocomplete using AngularJS? ...

angularjsjsongoogle-mapsgoogle-maps-api-3spring-boot

Ways to handle errors when using navigator.clipboard.writeText

document.queryCommandSupported('copy') may not be available on all browsers. I experimented with the code below, which successfully copies the link on Firefox but fails on Opera. It displays an alert indicating that the code has been copied, yet ...

javascripthtml

angularjs: hide div based on text entered in textfield

Is there a way to hide a div (with the class "card") until the user inputs text into the textfield in an AngularJS application? I believe the solution involves using ng-show, but I'm unsure of how to implement this functionality. Any assistance would ...

javascripthtmlcssangularjs

What is the best way to emphasize a table row during a search rather than just the text?

I am currently using a jQuery script that searches for a specific string in a simple text input field and highlights only the string itself if it is found. However, my data is organized within a table and I am interested in knowing if it is possible to hig ...

javascriptjqueryhtml

How do I disable scrolling while the animation is running in CSS?

Is there a way to disable scrolling while animating in CSS without using overflow:hidden on the body tag? ...

htmlcss

Total Output Calculation

In my latest coding project, I have crafted a unique algorithm to calculate exam scores with the inclusion of interactive buttons! function incorrectResponse() { var calc = 0; var calc2 = 1; var divElement = document.createElement("div"); divEle ...

javascripthtml

Concealing the primary div within a Vue child component

Is there a way to conceal the primary div within a Vue application created using Vue-CLI? I attempted adding the display property, but it did not solve the problem. I am attempting to hide it within my Channels component. Here is how my main component lo ...

javascripthtmlcssvue.js

Display the status in the textbox once a dropdown value has been selected

I have a function that allows me to add shops. Within this function, I am able to select whether the shop is OPEN or CLOSED. The goal is for the status of the shop, either OPEN or CLOSED, to appear in a textbox on another modal. When creating a user and ...

javascripthtmlcodeigniter

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

javascripthtmlcss

Ensuring the modal is stored in one central location (Bootstrap)

I'm currently working on a website project using bootstrap, and I need to incorporate the same modal across all pages. Right now, I find myself duplicating the entire code in each HTML file to make it accessible on every page. However, this method is ...

htmlcssmodal-dialog

Obtaining the dataItem of an edited cell in a Kendo grid

One issue I'm running into is retrieving the dataItem(row) when a cell in a column with a dropdown menu is updated. I've noticed that dataBind doesn't seem to be working as expected. In this project, I am utilizing Kendo Grid along with An ...

angularjskendo-gridkendo-dropdown

The issue with adjusting the top position in jQuery

As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element. I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, wh ...

jqueryhtmlcss

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

pythonhtmlselenium

Page rendering issue: Access to page unavailable

I've been attempting to include a link to my privacy policy in the footer using the following code: <a href="/privacypolicy"> Privacy Policy </a> However, when I view the homepage on my local host and try to access the privacy p ...

htmlexpress

Unable to utilize object functions post-casting操作。

I've encountered an issue while trying to access some methods of my model object as it keeps returning an error stating that the function does not exist. Below is the model class I have created : class Expense { private name: string; private ti ...

javascriptangularjstypescript