Adjust the font color of the progress bar dynamically based on the background color using SCSS and HTML

I am currently working on a progress bar that displays the percentage of delivery completed. While I have successfully designed the progress bar itself, I am struggling to change the text font color based on the background color of the bar.

<div class="progress">                      
   <div class="bar" [style.width.%]="row[column?.value]">                                                
   </div>                      
   <div class="percent-container">
      <p class="percent">{{row[column?.value]}}%</p>
   </div>
</div>

For example: https://i.sstatic.net/584VP.png

In the image above, the number '50' should be displayed in white while the percent symbol should be in black. When the background is completely blue, indicating 100%, the entire text should be displayed in white.

Although I am able to achieve an output similar to the first image, I am aiming to implement a feature where the font color changes based on the background color.

https://i.sstatic.net/MkCJw.png

The width of the progress bar will vary for each record in the table. Here is a sample CodePen link for reference: https://codepen.io/Surendra_Mourya/pen/NWdpMep

htmlcssangularsassprogress-bar

Answer №1

One way to set the color property is by using [style.color]:

<div class="progress">                      
   <div class="bar" [style.width.%]="row[column?.value]">
   </div>                      
   <div class="percent-container">
      <p class="percent" 
          [style.color]="1 < 2 ? 'grey' : 'deeppink'">{{row[column?.value]}}%</p>
   </div>
</div>

Alternatively, you can apply styles conditionally like this:

<p class="percent" 
    [ngClass]="('foo'=='bar')?'foo-class':'another-class'"> 
    {{row[column?.value]}}%
</p>

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

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

javascriptcssajax

Initializing dynamic windows with jsPlumb functionality

I am facing a challenge while initializing jsPlumb with a variable number of starting windows, depending on the scenario. Due to the requirement of absolute positioning for the windows, they end up overlapping each other during initialization, making it di ...

cssjsplumb

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...

htmlcssgoogle-mapskendo-ui

An issue has occurred due to an illegal mix of collations (greek_general_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) when performing the operation 'like'

Although this topic has been extensively covered, my issue presents a slightly different challenge. I have set the default charset to utf8 in both the connection made to mysqldb in my Python code and my HTML files. conn = pymysql.connect(host='my ...

htmlmysqlinpututf-8collation

Has anyone figured out the issue with Uplodify? It suddenly ceased to function

For some time now, I've been using uplodify without any issues. Unfortunately, as of yesterday, it suddenly stopped working. I'm at a loss as to what might have caused this sudden change. Could someone please offer me some assistance? I've ...

javascriptphpjqueryhtml

Various background positions

Is it possible to declare multiple background positions for the same background image? I have a span with the class page_heading and I want this class to display the same image twice, once at the beginning of the text and once at the end. HTML: <h1&g ...

cssbackground-image

Scrape data from LinkedIn search results using HtmlAgilityPack

Looking to fetch the top search result for a LinkedIn query. Check out this fiddle: https://dotnetfiddle.net/Vtwi7g Passing this link to 'html' variable: Targeting the first result : Wondering how to pass credentials for logging into Lin ...

c#htmllinkedin-apihtml-agility-pack

Display a div element for a specified amount of time every certain number of minutes

I am currently utilizing AngularJS, so whether the solution involves AngularJS or pure JS does not make a difference. In the case of using AngularJS, I have a parameter named isShowDiv which will determine the switching between two divs based on the follow ...

javascripthtmlangularjs

ngif directive does not function properly when subscribe is utilized in ngOnInit

this is the unique component code import { Component, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; //import { Item } from '../item/item.model'; import { CartItem } from './cart-item.model'; imp ...

htmlangulartypescript

Does Internet Explorer have a tool similar to Firebug for debugging websites?

Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...

htmlcssinternet-explorer

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Is there a way to capture the value of a JavaScript variable and store it in a Python variable? I have a Python-CGI script that generates a selection box where the user can choose an option from a list. I want to then take this selected value and save it ...

javascriptpythonhtmlcgi

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

My goal was to create this function using Flask, but it seems that only JavaScript is capable of achieving it. This is my first attempt at coding it. Here's the code snippet: const navSlide2 = () => { const burger = document.querySelector(&apos ...

javascripthtmlcss

Unable to modify the date format in Ionic 2 once it has been initially selected by the user in the date

In this snippet of HTML, there are two elements - a button and a date input. <ion-datetime id="datetime-12-0" pickerFormat="DD/MMM/YY" min="2017" max="2020" [(ngModel)]="date.date"></ion-datetime> <button (click)="triggerClick('dat ...

angularionic2formatdatetimepicker

How to handle the "Escape" character in PHP using the echo statement?

A quick question: echo '<button type="button" id="add" onClick="addAsset('.$filename.');"> '.$filename.' </button>'; This piece of code generates a button with an onClick event that adds the asset example.png. Ho ...

phphtmlescaping

Using React components to activate a click effect on the parent component

I have a React component called Card that has an onclick function triggered when the card is pressed. However, within this component, there are child elements such as sliders and buttons that perform their own actions. When clicking on these child elements ...

cssreactjs

Identifying shifts in offsetTop

In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea. The layout consists of two blocks - Block 1 and Block 2. Block 1 is expan ...

javascripthtmlcssangular

What modifications need to be made to the MEAN app before it can be deployed on the server?

Following a tutorial on Coursetro, I was able to successfully build an Angular 4 MEAN stack application. However, when it comes to deploying the app on a server running on Debian-based OS, I am facing some challenges. The application should be accessible o ...

javascriptnode.jsangularmongodbexpress

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

I have an urgent task to develop a web page where users can input data, and the backend will perform calculations and display the result below the input field on the same page (similar to checking online air ticket prices). I am new to Django and HTML. Be ...

htmljquerydjangoajaxforms