HTML and CSS: creating a loading progress bar with a buffer

Question

HTML and CSS: creating a loading progress bar with a buffer

Could someone assist me in adjusting the CSS and/or HTML for my loading bar? I am currently facing two issues with it.

The first problem is that there seems to be an excess shadow extending outside the bar on the left and right beyond the border. This gives the appearance of pixelation in the border-radius when properly zoomed in. It seems to be related to the box-shadow property, as removing it from both #progress and #buffer eliminates the issue.

The second issue is relatively minor but quite irritating. When the progress/buffer bar begins to load (with a width of 0.4%), the shape of the div exceeds the container:

I understand that I can use overflow:hidden (which I already use in #loading_bar_container) to address this, but it seems that setting position:absolute prevents it from being hidden (and I require absolute positioning to ensure the two bars overlap each other). If I remove #buffer (leaving just one bar) and eliminate position:relative from #loading_bar and change position:absolute to absolute in #progress, I achieve the desired layout:

Here is a piece of code from a JSFiddle snippet where we can experiment with it further.

Cheers!

PS: I believe the tag should be 'loading-bar,' but since I cannot create a new tag, I appended it as 'progress-bar.'

Edit: After testing in Chrome, @Oriol mentioned that it functions well in Firefox. Upon checking, Firefox displays it correctly as intended. I also verified Safari, which exhibits similar behavior to Chrome. Therefore, this inquiry pertains to Chrome and Safari specifically. I have not tested it in IE yet (feeling hesitant).

html css progress-bar

Answer 1

Answer №1

There appears to be a bug in Chrome related to the position:relative property.

Take a look at the examples here: http://jsfiddle.net/VeJNt/2/ and http://jsfiddle.net/VeJNt/3/

Instead of using position:relative and position:absolute, you can try this:

#progress {
    margin-top:-8px;
}

Check out the updated version here: http://jsfiddle.net/VeJNt/4/

Consider simplifying your code by removing redundant elements like loading_bar_container and loading_bar: http://jsfiddle.net/VeJNt/5/

Note:

If you want a more flexible code that works regardless of the number of bars, you can use the following CSS:

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

You only need to adjust the background and box-shadow properties for each bar individually.

View the enhanced version here: http://jsfiddle.net/VeJNt/6/

Remember, when setting negative margins, subsequent elements also move accordingly. You don't need to keep increasing the negative margin for each element as they will adjust automatically based on the previous one's positioning.

Answer 2

There appears to be a bug in Chrome related to the position:relative property.

Take a look at the examples here: http://jsfiddle.net/VeJNt/2/ and http://jsfiddle.net/VeJNt/3/

Instead of using position:relative and position:absolute, you can try this:

#progress {
    margin-top:-8px;
}

Check out the updated version here: http://jsfiddle.net/VeJNt/4/

Consider simplifying your code by removing redundant elements like loading_bar_container and loading_bar: http://jsfiddle.net/VeJNt/5/

Note:

If you want a more flexible code that works regardless of the number of bars, you can use the following CSS:

#loading_bar>div {
  border-radius:7px;
  height:100%;
  width:0%;
  margin-top:-8px;
}
#loading_bar>div:first-child {
  margin-top:0;
}

You only need to adjust the background and box-shadow properties for each bar individually.

View the enhanced version here: http://jsfiddle.net/VeJNt/6/

Remember, when setting negative margins, subsequent elements also move accordingly. You don't need to keep increasing the negative margin for each element as they will adjust automatically based on the previous one's positioning.

HTML and CSS: creating a loading progress bar with a buffer

Answer №1

Similar questions

Diverse outcomes generated by a single dropdown selection - Harnessing the power of JavaScript and HTML

Error encountered: The property indexOf cannot be read. Possible issue with .load() function in jQuery causing this error

Is it necessary to include the 'html' and 'body' tags in a WordPress Page Template?

Having difficulties with incrementally rotating a CSS cube to every direction

The upper border is missing from the middle div in the presence of three divs

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

What is the best way to design an HTML table that features alternating colors for each row and column?

Transferring HTML elements between pages

Steps for creating a file selection feature in Chonky.js

Mobile Image Sizing with Bootstrap 4 Cards

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Tips for adjusting jCountdown timer to be auto responsive while utilizing CSS sprite resources

`CSS border issues`

Creating interactive tooltips in Shiny applications with the help of ShinyBS

If the text width of a label exceeds the total width of its container, intelligently display a sub-string based on pixel calculations

CSS code to create a single content bar flanked by two sidebars

Font family experiencing compatibility issues with font face

Jumbling a word by shuffling its letters into a random order

Customize the MUI Slider Component with unique colored thumbs