How about adding various colors in the background with layers?

I was recently given a task by a client to convert their picture art into CSS code. While I have successfully completed most of the task, I am facing difficulty in coloring the div similar to the example provided by the client. Here is the client's version for reference.

Below is my version:

body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
<div class="loading_bar">
</div>

htmlcss

Answer №1

To create a progress bar without adding extra markup, you can use linear-gradient and adjust the background-size:

body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin:10px auto;
  background-image: linear-gradient(to bottom, #bacad3 50%, #8ca1ad 0%);
  background-size: calc(100% - 4px) calc(100% - 4px);
  background-position: 2px 2px;
  background-repeat: no-repeat;
}
<div class="loading_bar">
</div>

<div class="loading_bar" style="background-size: 10% calc(100% - 4px);">
</div>

<div class="loading_bar" style="background-size: 60% calc(100% - 4px);">
</div>

Answer №2

If you're looking to spice up your loading bar, I recommend adding another div in the middle and styling it accordingly. Adding some padding to the bar can also enhance the overall look. To achieve a cool 'two-tone' effect, simply use a border on one side with an equal height as the element itself.

Check out this example:

body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
  padding: 2px;
}

.loading-bar-center {
  width: 50%;
  background: white;
  height: 13px;
  border-bottom: 13px solid lightblue; 
}
<html>
  <head>
  </head>
  <body>
    <div class="loading_bar">
      <div class="loading-bar-center"></div>
    </div>
  </body>
</html>

Feel free to customize the colors to your liking and add animation by adjusting the width % of the loading-bar-center element.

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 css values for component _nghost-c0 in an Angular application

Recently, I've been delving into Angular 5 and couldn't help but notice the peculiar html tags with ng generated attributes like _nghost-c0 and _nghost-c1... This got me wondering, what exactly do these attributes signify? [_nghost-c3] .employee ...

cssangularangular5

Issues arise when using the "placeholder" attribute within a <p:inputText tag while the inputText is devoid of any value

A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...

htmlcssjsfprimefaces

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss

You can submit a photo to a form as an attached file

I had a code that looked like this My goal is to simplify the process for users by allowing them to fill out additional information in a form without having to upload an image separately. I want to display the canvas image from the previous page in the fo ...

javascriptphphtml

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

javascriptjqueryhtmlcss

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

javascriptcssreactjstailwind-cssopenai-api

How can I establish the conversion from pixels to em units?

According to a source I found, 1 em is equivalent to 16px. You can read more about it here. Despite setting the font-size to 100% in the body and using font-size: 1em, the standard font size in my Jekyll site remains 12px. Curious? Visit my Jekyll site a ...

htmlcssjekyll

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

javascriptjqueryhtmlcss

The overflow:hidden feature doesn't appear to be functioning as expected

I am struggling to hide the text details within a div containing text and image, organized in ul li structure. Despite applying overflow hidden to the .sbox class, the text details refuse to remain hidden and appear to be overflowing. Explore this issue o ...

htmlcss

Is there a way to prevent Angular Material Buttons from overlapping a sticky bar when scrolling?

In my Angular application, I have a navigation bar at the top that sticks in place (position: sticky; top: 0;). Beneath the navigation bar is the content, which includes Angular material components such as mat-buttons or mat-cards. The issue arises when ...

cssangularangular-material

rectifying file extension hyperlinks

While designing a webpage on my MacBook's local server, I unintentionally omitted the ".css" file extension in the href attribute of a link to my locally stored stylesheet. The mistake went unnoticed until I transferred my files to an externally hoste ...

htmlhostingwebserver

What is the best way to implement the 'setInterval' function in this code to effortlessly fetch forms or data on my webpage without any need for manual refresh?

I am using ajax and javascript to fetch a modal on another page or in a separate browser. While I am able to retrieve the modal, I require the page to refresh before displaying the modal. I have come across suggestions to use the setInterval function but I ...

javascriptphphtmlajax

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Add unique content to a div upon page reload

Whenever the page is refreshed, I would like to add a random anchor from an array into a specific div. Here's my current code: <div id="exit-offer" class="exit-offer-dialog"> <div class="offer-content" id="banner-load"> <bu ...

javascriptjqueryhtml

Initiate a click event on an anchor element with the reference of "a href"

I'm currently facing an issue with clicking a href element on my HTML website. The click event doesn't seem to be triggered. CODE: HTML CODE: <div class="button" id="info" ></div> <ul id="game-options"> <li><a ...

javascriptjqueryhtml

Trigger a fixed bottom bar animation upon hover

I have a bar fixed to the bottom of the browser that I want to hide by default. When a user hovers over it, I want the bar to be displayed until they move their cursor away. <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

javascriptjqueryhtmlcss

Carousel-Owl, glide through two items simultaneously

I am currently in the process of developing a slider using the beta version of Owl-Carousel 2, but I am encountering several issues. My goal is to configure the owlCarousel to function as follows: It should scroll through 2 items at a time while displayin ...

javascriptjquerycssowl-carousel

HTML source does not contain nested link elements for linked areas with nested hyperlinks

I want to create a visually and functionally appealing hyperlink within a larger rectangular shape that spans the full width of the page and is also a hyperlink itself. Below, you'll find an ASCII-art representation of what I'm trying to achieve: ...

htmlcss

Challenges encountered in retrieving 'text' with Selenium in Python

After attempting to extract the list data from every drop-down menu on this page, I managed to access the 'li' tag section and retrieve the 'href' data using Selenium Python 3.6. However, I encountered an issue when trying to obtain the ...

pythonhtmlseleniumweb-crawlerautomated-tests

The main page wrapper will be centered on all devices except for tablets, where it will appear

I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...

androidhtmlcss