Repeating percentages displayed in a progress bar

I created a responsive progress bar, but the progress values are repeating. I only want the central value to be displayed.

Any suggestions on how to fix this issue?

DEMO

<div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
            <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

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

htmlcssangulartypescript

Answer №1

I made adjustments to the progress bar by removing the percent value and incorporating z-index.

Here is the modified code snippet: 

<div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text" style="z-index:2">{{data.key.progress}} %</div>
            <div class="progress-bar" style="z-index:1" [style.width]="data.key.progress + '%'">
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Answer №2

To enhance the appearance of the bar, it is recommended to delete the line 

<div class="progress-text">{{data.key.progress}} %</div>
from the following code for the white bar, as well as removing 
<div class="progress-text">{{data.key.progress}} %</div>
within the progress-bar for the colored bar.

<div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>

Answer №3

It appears that you are looking to only show the white text.

To achieve this, simply delete line 15 in the app.component.html file and apply a high z-index value to the progress-text class.

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

Can anyone provide guidance on creating a new type in Ionic Vue?

How can I define the description as a type in my code? When I run it, I get an error that says "Property 'description' does not exist on type '{ takePhoto(): Promise; }'" <script lang="ts"> import { IonPage, ...

typescriptvue.jsionic-frameworktypes

Once data is assigned to a variable within a subscribe method, it will no longer be available after the method has been completed

I'm currently working with the signature_pad library, and I have encountered an issue. When I draw a line, the method toDataURL() returns a string. I have a MessagingService set up to send this string between different Angular components. The goal is ...

angularobservable

Why does the request body show as null even after passing body data in Prisma?

My application uses Prisma for database storage with MySQL. It is built using Next.js and TypeScript. I have set up the API and it is functioning properly. However, when I try to save data sent through the API, the `request.body` is null. Interestingly, wh ...

reactjstypescriptnext.jsprisma

Tips for retrieving input values when they are not available in HTML documents

In this code snippet, I am creating an input element with the file type without adding it to the DOM. My goal is to retrieve the value of this input once the user selects a file. Even though the input is not part of the HTML template, I still want to acces ...

javascriptangulartypescript

Struggling to access the html elements within a component once the ng2 page has finished loading?

I am working on a web app that utilizes ng2-smart-table and I want to hide all cells within the table. However, when attempting to retrieve all the cells using document.getElementsByTagName("td") in the ngAfterViewInit() lifecycle hook, I noticed that the ...

javascriptangular

The dropdown menu displaces nearby content

Visit this website for more information To access the blog section, simply click on "BLOG" in the top menu. Once there, look to the right side under the circle logo and select "Dísznövények" from the dropdown menu. Be cautious of long content strings b ...

htmlcss

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Display secret content upon hovering with a stylish animation

My current structure is as follows: HTML: <ul> <li> <span>asd</span> adsafsadlvjnsd </li> </ul> CSS: span { width: 0; } li:hover span { width: 60px; } In this setup, the content inside the span tag is h ...

htmlcss

Is ngForIn a valid directive in Angular 4?

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

angulartypescriptngfor

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

I have created a custom pipe by extending the DataPipe Angular class. import { Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common'; @Pipe({ name: 'dateTimeFormater' }) export class DateTi ...

javascriptangulardatelocale

Transform the Object/String into a route query parameter string by hand

We have implemented query params in our Angular app to manage configuration settings that are subject to frequent changes. Currently, we are utilizing the following code snippet: this.router.navigate([], { relativeTo: this.activatedRoute, queryParams ...

angularroutes

What is the reason behind typescript making it necessary for me to find a way to set a value of type

function f1() { const v : string = String(); if(v) {alert("IF");} // OK const b : boolean = v; // Type 'string' is not assignable to type 'boolean'. if(b) {alert("BOOLEAN");} } f1(); My approach to this issue involv ...

typescripttype-conversionboolean

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

javascripttypescriptes6-promise

Automating the process of posting a file to a form with javascript

I have a piece of client-side JavaScript that creates a jpeg file through HTML5 canvas manipulation when the user clicks an "OK" button. My goal is to automatically insert this jpeg output into the "Upload Front Side" field in a form, simulating a user up ...

javascripthtml

Is there a way to eliminate a div and all its contents from the DOM?

As I work on my web application, I am trying to implement a system where error messages can be returned via ajax upon success or failure. The ajax script is functioning correctly in terms of returning errors or successes. However, my challenge lies in com ...

javascriptjqueryhtmlcssajax

"Using a CSS pseudo element to create stylish separators between elements

Can CSS pseudo elements :after or :before be used to clear floats between elements? If not, what other method can be used to clear floats between <div class="float"> and <section class="inner">? The HTML and CSS structure is as follows: * { ...

htmlcss

Incorporating the <sub> element while maintaining the line height

I am facing a challenge with formatting text that includes subscripts and superscripts tags. For example: <div>hello <sub>world</sub>, how are you? Translated as logical aggregates or associative compounds, these characters have been int ...

htmlcss

Is there a way to add Internet Explorer specific stylesheets to the Wordpress functions directory using enqueue?

I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...

phpcsswordpress

Is it possible to store multiple keys in HTML local storage?

Is there a way to store multiple keys to local storage without overwriting the previous ones when multiple people take a survey and refresh? Could they be grouped by userID or sorted in any way? $('form').submit(function() { $('input, ...

javascriptjqueryhtmllocal-storage