What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume.

Here is my initial attempt:

    <style scoped>
.strip:before {
  position: absolute;
  background: #343434;
  border-bottom: 2px solid black;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 15%;
  left: 0;
}

.oval div {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
</style>

The current output looks like this: https://i.sstatic.net/kif6d.png

My goal is for the green section to represent the liquid level by changing dynamically based on the liquid volume.

The value at the bottom should also be constantly updating.

--EDIT I'm attempting it this way:

<div class="oval" >
            <div class="strip" v-bind:style="{ background: props.item.color}"></div>
          </div>
css

Answer №1

To create a visually appealing "partially filled" bar effect, you can utilize a single div element with a background of linear-gradient:

.oval {
  --fill-level: 60%;

  background: linear-gradient(0deg, green var(--fill-level), black var(--fill-level));
  border-width: thin 10px;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
<div class="oval"></div>

If you switch the value from 0deg to 90deg, you'll achieve the traditional horizontal "progress bar": 

.oval {
  --fill-level: 60%;

  background: linear-gradient(90deg, green var(--fill-level), black var(--fill-level));
  border-width: thin 10px;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
<div class="oval"></div>

Answer №2

You're on the right track! To achieve this effect, you only need one element: .oval. By styling the oval element and using the :before pseudo-selector, you can easily add a line with control over its position using the bottom value.

.oval {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
  overflow: hidden;
  background-color: green;
}
.oval:before {
  position: absolute;
  bottom: 25%;
  width: 100%;
  height: 3px;
  background: black;
  content: '';
}
<div class="oval"></div>

Alternatively, you can create the line using a separate element by nesting the .strip within the oval. This way, you do not need to utilize the :before selector on the .strip element as in your initial attempt.

.strip {
  position: absolute;
  background: #343434;
  border-bottom: 2px solid black;
  z-index: 1;
  bottom: 25%;
  width: 100%;
  height: 3px;
}

.oval {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
  background-color: green;
  overflow: hidden;
}
<div class="oval">
  <div class="strip"></div>
</div>

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

Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message. Is ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on organizing items into rows with 3 columns through iteration

Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ensure that items are properly aligned within a container with full width and an overflow:scroll property

I'm facing a bit of a challenge here... I have a container with a max-width setting, and inside that container, I want to have a slider that spans the full width with horizontal scrolling capability. To achieve this, I followed the instructions from ...

htmlcss

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance. Currently, my navbar is located below the image but not within it like this: I am looking to achieve so ...

htmlcssangularjsbootstrap-4

Modifying the color of a non-active tab - Material UI Tabs

Is there a way to customize the color of inactive tabs in Material UI tabs? I have noticed that they currently appear black, as shown in the screenshot here: screenshot Thank you! ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to shift my content to the next line once it reaches a specific width in my paragraph

When a string is pulled from a database and inserted into a paragraph, it breaks perfectly if the paragraph has spaces. However, if a word is longer than the line, it goes off the page. How can I make it wrap to the next line instead of overflowing off the ...

phphtmlcss

The blur() function does not function properly on IOS devices such as iPad and iPhone

I've attempted using blur() to change the CSS, but it seems that this function is not effective. After researching, I discovered that blur() does not work on IOS devices. Is there an alternative method for removing the position from .body-clip-overflo ...

javascriptcss

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

htmlcss

When taking a vertical picture on my iPhone, my Vue component does not function properly

Having trouble with displaying recently uploaded images on a form. If the image is taken from a phone, it may have an exif property that browsers do not handle correctly, causing the picture to appear flipped or sideways. Upside down photo To fix this is ...

javascripthtmlcssvue.jsexif

Prevent Second Division from wrapping around floated Division

I am running into a minor issue with the positioning of a div in my current project. +------------------------+ |+-------+ ~~~~ TITLE| <--how can I prevent text from wrapping around || | ~~~~~~~~~~~~~ |\ on the left ...

htmlcss

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

javascripthtmljquerycssbootstrap-4

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed! EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY MY OWN SOLUTION HTML <div id="Ftr"> ...

htmlcsssticky-footer

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

jqueryhtmlcss

Update the background image every minute with a smooth transition effect

I am currently in the process of developing a personal dashboard that requires dynamic background images to change every minute. To achieve this functionality, I have integrated the [Pixabay API][1] and formulated the following API request: https://pixaba ...

javascripthtmljquerycssbackground-image

Utilizing Bootstrap to position a navigation bar next to a floated element causes surrounding content to be pushed

I am facing an issue with my 2 column layout where the content in the right column is being pushed down to clear the left column, resulting in a lot of vertical white space between the navigation and the content. Below is the code snippet: <head> ...

csstwitter-bootstrap

Guide to Setting the Color of a Link Using CSS

I’ve been attempting to change the color of an ALink using CSS, but it seems like I just can’t get it right. It’s clear that I’m missing something, as I’ve spent quite a bit of time tinkering with this seemingly simple issue and still can’t fi ...

htmlcss

Angular - Modify the Background Color of a Table Row Upon Button Click

I am struggling to change the background color of only the selected row after clicking a button. Currently, my code changes the color of all rows. Here is a similar piece of code I have been working with: HTML <tr *ngFor="let data of (datas$ | asyn ...

cssangularhtml-tableangular8

Adjust the class of a div element located close to its ancestor using JavaScript

I'm trying to change the class of the element #sidePanel from .compact to .expanded dynamically in this code snippet: <div id="sidePanel" class="compact"></div> <div id="topbar"> <div id="buttonContainer"> <div ...

javascripthtmlcssclass

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss