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

Tips for optimizing Slider Code to showcase an expanded selection of slides

I am currently troubleshooting a slider code on my ASP.NET website. After examining the HTML, JS, and CSS from the page theme, I noticed that only two slides are being displayed. However, when attempting to add a new slider HTML and adjusting the CSS for t ...

javascriptjqueryhtmlcss

Tips for injecting an Angular variable into a JavaScript variable

Within my angular controller, I have a function defined as follows: $scope.get_all_places = function () { $http.get("get-all-places").then(function (response) { $scope.selected_place = eval(response.data[0]); }); }; I am trying to assign ...

javascriptjqueryangularjs

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

javascriptangularjsangular-material

Tips for confirming schedule accuracy

Trying to determine if a specific time falls between two others is the task at hand. Allow me to illustrate: Presently, it's Thursday, and the time reads 11:39 PM. Establishment X operates from 12:00 AM to 11:59 PM on Thursdays (a regular occurrence ...

javascriptangularjsangularfirebasemomentjs

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

Chrome is having trouble loading basic JavaScript

Here's the JavaScript code I have placed inside the head tag of my HTML: <script type="text/javascript"> function over1() { var img1 = document.getElementById("1").src; document.getElementById("big").src = img1; } function out() { ...

javascripthtmlgoogle-chrome

Create an input field dynamically by utilizing the append method in jQuery

Concern: As part of an edit page, I am working on appending an input field from a modal window to an existing panel while retaining the format of the rest of the fields. The user is currently able to create and add the new field using the code provided in ...

javascriptjqueryhtml

Saving data in a CSV file on your local device using HTML5

Is it possible to utilize HTML5 for saving or writing data to a local file on the user's file system? I am curious about this functionality, especially since HTML5 now offers the capability to export data from the client and save it as a CSV file. If ...

javascripthtmlcsv

Troubleshooting Issues with Angular JSON Requests

I've encountered an issue while attempting to make an ajax request to a PHP server using Angular. It seems that Angular is sending the data as a string, but the PHP code does not have a $POST variable (even though the same process works flawlessly wit ...

phpajaxangularjs

Can you guide me on integrating an Angular 2 page into a Spring MVC Application?

I am looking to integrate index.html from an angular 2 project as the welcome page for a Spring MVC application. When running the angular 2 project with 'npm start', the components load correctly. However, without running 'npm start', t ...

javaangularjsspringspring-mvcweb

What are the steps for implementing the innerClass style on the searchBox within the appBase?

I'm currently incorporating the searchBox component from appbase io into my upcoming js web application, but I've been facing challenges in customizing the layout of both the search box and the list. Despite following the documentation which sug ...

cssreactjsobjectnext.js

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3html-select

Header text refuses to cooperate and center itself

Struggling to find the best way to center the "Header" text while keeping the icon in place. I've tried using text-align: center;, but it's not producing the desired results. Could anyone provide guidance on how to achieve this? Thanks. IMG: ...

htmlcss

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

Can you assist with the following issue? <?php if(isset($_POST['MEASURE'])) { shell_exec("sudo python /var/www/html/lab/mkdir.py"); } ?> Here is the HTML part: <form method="post" > <input type="submi ...

phppythonhtmlbutton

What HTML5 form JavaScript polyfill offers the most extensive functionality and compatibility across different browsers?

The improved attributes and tags introduced in HTML5 are quite beneficial. Unfortunately, support for these features is limited in Chrome and Firefox, with virtually no support in IE9 and earlier versions. After researching, I have come across Modernizr a ...

htmlformspolyfillswebshim

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

javascripthtmljquerycss

Checkboxes display on a separate line when rendered inlines

I'm having an issue with the rendering of my checkbox in CSS. The checkbox is currently displaying on a separate line from the text, but I would like it to be inline with the rest of the content. For reference, here is the full CSS and HTML code: htt ...

htmlcss

Different ways to adjust the appearance of table borders in HTML

I find myself at a standstill, hence why I am reaching out with this question. This Table presents itself with various border sizes and colors, along with similar complexities in the background of its cells. Could anyone provide me with guidance on how t ...

htmlcsscolorshtml-tableborder

Is it possible to eliminate the port number in Angular 7?

Currently, I am utilizing Angular in conjunction with an ASP.Net Web application. One interesting observation I've made is that when I use ng build, the app builds and runs on a URL without any port number. However, if I run the app using ng serve, it ...

angularjsangular

Angular material input featuring an additional component

Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content la ...

csstwitter-bootstrap-3material-designangular-material