Troubleshooting problems with the CSS code for a progress bar in Gmail

I recently came across a unique progress bar design on Gmail and wanted to implement something similar. I found some code snippets on this webpage: . However, I encountered an issue where the progress bar was only displaying in Internet Explorer but not in Google Chrome or Mozilla Firefox. Surprisingly, it did work in an older version of Google Chrome (version 41). If anyone could provide assistance with this, I would greatly appreciate it.

CSS :

.loader_box {
    text-align: center;
    width: 320px;
    border: 1px solid #999;
    padding: 1px;
    height: 8px;
    margin-right: auto;
    margin-left: auto;
}
...

HTML :

<div class="loader_box">
    <div class="loader"></div>
</div>

JavaScript :

<script>
var displayLoaderCount =     0;

function printMsg(message, clearQueue){
    ...
}
...
</script>
javascripthtmlcss

Answer №1

After some exploration, I have stumbled upon a solution that seems to be effective, although the reason behind it remains unclear!

By simply removing the 0 from the -webkit-animation of .loader (specifically on Line 37 in the css section), the issue was resolved:

Original code: 

-webkit-animation: load 5s linear 0 infinite;

Updated code: 

-webkit-animation: load 5s linear infinite;

To view the changes, check out the link here:

If you're interested in diving deeper, refer to the W3C standard documentation provided at: http://www.w3.org/TR/css3-animations/#animation

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

The numbering in the list does not align vertically with the corresponding content

I am attempting to create an ordered list with collapsible sections inside the li elements. The goal is to display basic information about a specific context, and when clicking on a link, additional details are shown. While the code is functional, I am fac ...

csstwitter-bootstrapbootstrap-5

Migrating a few PHP scripts to ColdFusion

Hey there, I'm currently in the process of converting some really basic PHP code to be compatible with a development server that only supports CF. This is completely new territory for me, so I'm looking for some guidance on how to port a few thin ...

phpcssvariablescoldfusionporting

Trouble arises with the jQuery keydown function

Currently, I am encountering an issue with a straightforward jQuery code implementation. In addition to the problem description, I have included the HTML structure below, The current functionality works as expected in setting focus on the input field upo ...

jqueryhtmlcss

jQuery and Easy Dialog

My jQuery Model window has a form inside. Even though I have set autoOpen to false in my dialog, the fields are still visible when the page is created. All forms are contained within a div. This is what my dialog code looks like: $("#dialog-form").dial ...

javascriptjqueryjquery-uimodal-dialog

How can the session user object be modified after logging in?

I've encountered a strange issue and I'm puzzled about its origin. In my Next.js app, I make use of the next-auth library to implement the authentication system. Initially, everything seems fine - I can successfully sign in by verifying the cred ...

javascriptnode.jsreactjsnext.jsnext-auth

The ASP.NET Core MVC controller encounters a null input parameter when called by an ajax request

Here is the scenario involving an ajax call: ... $("#testBtn").click(function (e) { e.preventDefault(); $.ajax({ url: "/profile/GuestList", data: {"keytype": "1"}, method: "POST&q ...

javascriptc#ajaxasp.net-core.net-core

Exploring a Discord.js collection: tips for accessing and manipulating objects within an array in the collection

I have a discord.js Collection that contains information about dispatcher and queue objects. Here is the structure: Collection(1) [Map] { '403547647215927306' => { dispatcher: StreamDispatcher { _writableState: [WritableState], ...

javascriptarraysnode.jsdiscord.js

Leveraging angular.forEach for JSON Iteration

In my app and controller, I am working on creating a "flow chart style" question and answer system. To keep track of the current question and answer, I am using variables like $scope.ActiveQuestion and an array named $scope.ActiveAnswers. I am struggling ...

javascriptarraysjsonangularjsangularjs-ng-repeat

The JSON data structure is not being maintained

I am facing an issue with updating the json object model values using the code below. Even after changing the values, it seems like the model is not getting updated. I tried removing the async code and that worked. Why does the async code not work in this ...

javascriptnode.js

Eliminate the static JSON by using an HTTP GET request instead

Currently diving into learning Angular and I have a question about how to replace a hardcoded JSON array with JSON retrieved using http get. Here is the link to the plunker that I am actively working on. In order to populate the dropdown menu at the top, I ...

javascriptjsonangularjs

PHP array does not retain a variable

While building a website, I encountered a perplexing bug during coding. The issue arises when I store MySQL query results in an array and then call a JavaScript function with that data. Initially, the array contains 9 items: 8 of type tinyint(4) (from the ...

javascriptphpmysqlarrays

The alignment of the WordPress Bootstrap5 Navbar does not match the other col divs

I integrated Bootstrap 5's Navbar into my Wordpress website. However, I am facing an issue with alignment when the screen size changes. The button and expanded menu items do not align perfectly with the navbar-brand H2 element. I have tried various s ...

htmlcsswordpressnavbarbootstrap-5

Javascript conditional testing

I need help coding a <div> to display only if the numeric input is 18 or above and the YO option is chosen. Any guidance on this would be highly appreciated. See the code snippet below. <input type=numeric id=ageSelf ng-model="ageSelf" style="c ...

javascriptjqueryif-statement

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

javascriptjqueryhtml

NextJS-created calendar does not begin on the correct day

I'm facing an issue with my calendar code where it starts rendering on a Wednesday instead of a Monday. I want to adjust the layout so that it always begins on a Monday by adding some empty boxes at the start of the calendar. Essentially, I need to s ...

javascripttypescriptnext.js

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Angular.js, require.js, and jQuery Plugin all combined to create a uniquely customized directive

As a newcomer to Angular and Require, I am seeking assistance with the following code snippet. Despite successfully integrating Angular and Require, I am facing an issue where the bootstrap-switch element fails to initialize: define(['myapp.ui/module ...

javascriptjqueryangularjstwitter-bootstrap

Displaying MySQL results in a vertical sequence

I've stored the data in my database as follows: Football ART-NR-1337 Price: 5$ Basketball ART-NR-1333 Price: 10$ Now, I am working on a .php file that displays the articles like this: Football Basketball ART-NR-1337 ART-NR-1333 Price: 5$ ...

phpjqueryhtmlmysqlpdo

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

Looping through objects within objects using .map in React can be done by iterating over

This is the information I have export const courses = [ { id: 0, title: "first year", subjects: [ { id: 0, class: "french" }, { id: 1, class: "history" }, { id: 2, class: "geometry" } ...

javascriptreactjsnext.js