Is it possible to customize the width of text color alongside a progress bar?

Question

Is it possible to customize the width of text color alongside a progress bar?

My Bootstrap 4 Website contains the following HTML code snippet:

<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto>
            <h2>Example heading text</h2>
            <h6>Example subheading text</h6>
        </div>
    </div
</div>

The default color of the <h2> element is black. I am performing some calculations in the background based on this text. For instance, if the calculation result is 75%, I want to change the color of the text inside the <h2> element to red, but only up to 75% of the total text width (as shown in the example picture I added).

In addition, I want to include a progress bar beneath the text (between the <h2> and <h6> elements) filled with the same red color as the text above, extending to the same width (e.g., 75%).

Is there a way to achieve this using Javascript or jQuery? Alternatively, is there a CSS-only solution that can be implemented for multiple sections on my site, each with potentially different percentage values? Both elements should be colored in a sliding or linear effect simultaneously.

I have provided an example image for better clarity on what I am aiming for. Feel free to ask for further details if needed. https://i.stack.imgur.com/kIDsA.png

javascript jquery css bootstrap-4

Answer 1

Answer №1

The concept here is to extract the current value from a progress bar and use it as the color-stop values for two different colors, mimicking the behavior of a progress bar.

Below is a snippet of sample code based on your original code snippet.

In this demonstration, I opted not to utilize a progress bar. Instead, I utilized a for loop in conjunction with an alert function to demonstrate how the idea could be implemented. The iterations in the loop simulate a process that has a certain value at any given point, similar to a progress bar. By inserting this value into the gradient, the text color will change accordingly.

Keep in mind that this is simply a proposed solution.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style>
        .colorIt {
            display: inline-block;
            /*background-image: linear-gradient(to right, green 10%, black 10%);*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
        }

        h2 {
            font-size: 30px;
            font-weight: bold;
        }

    </style>
    <script>
        // Function to adjust the color-stops on the gradient

        $(document).ready(function () {
            adjustColorStops();
        });

        function adjustColorStops() 
        {
            var i;
            for (i = 0; i < 110; i++)
            {
                alert(i);   
                $(".colorIt").css("background-image", "linear-gradient(to right, green " + i + "%, black " + i + "%)");
                i += 9;
            }
            return;
        }
    </script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <h2 class="colorIt">Example Heading Text</h2>
                <h6>Heading Text with Gradient Filling.</h6>
                <!--<div class="progressBarDiv"></div>-->
            </div>
        </div>
    </div>


</body>
</html>

Answer 2

The concept here is to extract the current value from a progress bar and use it as the color-stop values for two different colors, mimicking the behavior of a progress bar.

Below is a snippet of sample code based on your original code snippet.

In this demonstration, I opted not to utilize a progress bar. Instead, I utilized a for loop in conjunction with an alert function to demonstrate how the idea could be implemented. The iterations in the loop simulate a process that has a certain value at any given point, similar to a progress bar. By inserting this value into the gradient, the text color will change accordingly.

Keep in mind that this is simply a proposed solution.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style>
        .colorIt {
            display: inline-block;
            /*background-image: linear-gradient(to right, green 10%, black 10%);*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
        }

        h2 {
            font-size: 30px;
            font-weight: bold;
        }

    </style>
    <script>
        // Function to adjust the color-stops on the gradient

        $(document).ready(function () {
            adjustColorStops();
        });

        function adjustColorStops() 
        {
            var i;
            for (i = 0; i < 110; i++)
            {
                alert(i);   
                $(".colorIt").css("background-image", "linear-gradient(to right, green " + i + "%, black " + i + "%)");
                i += 9;
            }
            return;
        }
    </script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <h2 class="colorIt">Example Heading Text</h2>
                <h6>Heading Text with Gradient Filling.</h6>
                <!--<div class="progressBarDiv"></div>-->
            </div>
        </div>
    </div>


</body>
</html>

Is it possible to customize the width of text color alongside a progress bar?

Answer №1

Similar questions

How can I style the inner div by adding a class to the first div?

A website with two distinct pages, where only the first page is refreshed

Access the value of a JSON property, return null if the key is not found, all in one line of JavaScript code

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

What You See Is What You Get - A versatile tool for editing both text and

Retrieve the content from a textarea and insert it into a different textarea with additional text included

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

Access the document on the desktop and open it in a new popup window

Pattern for identifying JavaScript import declarations

Ways to execute a script from termly on NextJS using JSX

What could be causing JavaScript fetch to only send OPTIONS requests instead of the expected calls?

Unused DIV elements in jQueryUI are identified using XSLT

Prevent jQuery UI dialog from adjusting its position relative to the browser when scrolling

Create a stylish bottom border exclusively for the text that has been wrapped

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

Using Ajax.BeginForm with BeforeSend functionality

I used npm to install AngularJS and then included AngularJS in my application

Rings that react to both width as well as height

Is there a way to customize the pagination dots in react-native-swiper-flatlist?

Manipulating Object Properties in the Browser's Console