https://i.sstatic.net/lAHOM.png
I am working on a project where I need to replicate a design like the one shown in the image using HTML / CSS. To add dynamic functionality, I plan to utilize Angular for passing width values. While I am familiar with using ngStyle in Angular to pass attributes dynamically, I am seeking guidance on how to achieve the visual aspect using purely HTML / CSS.
Any suggestions or recommendations for modifying the question description are welcome.
Presented here is a straightforward concept utilizing a single element where you have the ability to easily regulate the width of the progress through CSS variable.
I created the example without text in order to emphasize the key components (refer below for an example with text)
.box {
width:400px;
height:100px;
margin:5px;
border-radius:10px;
background:
linear-gradient(red,red) left/var(--p,200px) 100%,
linear-gradient(to bottom left,transparent 49.8%,red 50%) var(--p,200px) 0/ 30px 50%,
linear-gradient(to top left,transparent 49.8%,red 50%) var(--p,200px) 100%/ 30px 50%,
blue;
background-repeat:no-repeat;
}<div class="box">
</div>
<div class="box" style="--p:100px">
</div>
<div class="box" style="--p:300px">
</div>Example including text:
.box {
width:400px;
height:100px;
margin:5px;
border-radius:10px;
background:
linear-gradient(red,red) left/var(--p,200px) 100%,
linear-gradient(to bottom left,transparent 49.8%,red 50%) var(--p,200px) 0/ 30px 50%,
linear-gradient(to top left,transparent 49.8%,red 50%) var(--p,200px) 100%/ 30px 50%,
blue;
background-repeat:no-repeat;
display:flex;
justify-content:space-between;
align-items:center;
font-size:1.3em;
color:#fff;
}
p {
padding:0 10px;
text-align:right;
}<div class="box">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>
<div class="box" style="--p:100px">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>
<div class="box" style="--p:280px">
<p>Used<br> 200.00</p>
<p>Cash limit<br> 2000.00</p>
</div>When it comes to displaying progress bars, there are a few different methods:
<div> elements. The first one would have a 100% width, centered text alignment, and a black or white background. Inside this div, you can place another <div> to show the progress bar or marquee with the appropriate styling. The outermost div will contain the actual text content that you want to display. You may also need an additional wrapper <div> for organization.<div id="MyProgress" class="progressbar">
<div class="progress-inner">Your text here</div>
</div>
Alternatively, you could explore how Bootstrap implements its progress bars by referring to their documentation on Bootstrap progress bars.
Another option is to use the HTML5 <progress> element in conjunction with CSS, as detailed in this guide from CSS-Tricks. This method involves using JavaScript to update the appearance of the progress bar dynamically.1
progress[value]::-webkit-progress-value::before {
content: '80%'; // Replace with your desired value
position: absolute;
right: 0;
top: -125%;
}
To achieve the desired output, apply the following style:
Modify the width property in the two classes below:
#balance .used,
#balance .used:hover{
font-weight: bold;
width: 80%;
}
#balance .used-limit{
font-weight: bold;
width: 75%;
}
Implement the code provided below:
ul{
margin: 0;
padding: 0;
list-style: none;
}
#balance{
background: #E1ECF4;
border-width: 1px;
border-style: solid;
border-color: #E1ECF4 #E1ECF4 #E1ECF4;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
}
#balance li{
float: left;
}
#balance a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #FFF;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #697193;
background-image: linear-gradient(to right, #697193, #697193);
}
#balance li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
#balance a:hover{
background: #697193;
}
#balance a::after,
#balance a::before{
content: "";
position: absolute;
top: 0%;
border-top: 3.4em solid transparent;
border-bottom: 3.4em solid transparent;
border-left: 1em solid;
right: -1em;
}
#balance a::after{
z-index: 2;
border-left-color: #697193;
}
#balance a::before{
border-left-color: #697193;
right: -1.0em;
z-index: 1;
}
#balance a:hover::after{
border-left-color: #697193;
}
#balance .limit,
#balance .limit:hover{
font-weight: bold;
background: none;
color :#000;
}
#balance .used,
#balance .used:hover{
font-weight: bold;
width: 80%;
}
#balance .used-limit{
font-weight: bold;
width: 75%;
}
#balance .limit::after,
#balance .limit::before{
content: normal;
}<ul id="balance">
<li class="used-limit"><a href="" class="used"><p>Used</p><p>250.00</p></a></li>
<li><a href="" class="limit"><p>Cash Limit</p><p>300.00</p></a></li>
</ul>Utilizing jquery validation and bootstrap, I have encountered an issue when dealing with multiple forms in a view. The styling of validation messages does not remain consistent when I have to create a validator object manually for each form. How can I ens ...
import React from "react"; import { Offline, Online } from "react-detect-offline"; export default function DropDown() { return ( <> <Online>Only displayed when connected to the internet</Online> <Offline ...
Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...
My initial question on this forum. I've noticed that my text is being cut off because it's too long for the given space. I'm wondering if there's a way to decrease the vertical spacing between the rows using CSS? ...
I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...
Currently, I am facing an issue with my angular form that I am passing into my controller. Upon inspecting the form in the browser, I noticed that it is coming up as undefined. I have attempted to troubleshoot by changing the form's name and adjustin ...
I have recently updated to the latest version of Bootstrap: "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "bootstrap": "^4.0.0-beta.2", "core-js": "^2.4.1", "jquery": "^3.2.1", "popper.js": "^1.12.9", As part of this update, I incorporated a navbar: &l ...
Utilizing the Instant Sprite tool, I successfully created my own unique sprite image. With the help of a repeater control, I assigned the <td> class to be arg16 Private Sub cdcatalog_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handl ...
I am trying to position a div with an ID below a save button in my HTML code. The current setup looks like this: <button id="item_new" data-action="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button- ...
The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...
I am looking to showcase 6 images on a page using the Bootstrap grid layout. The images should be displayed in two rows, with 3 images in each row. Additionally, I want to implement a filter functionality using Isotope, so users can click on a specific cat ...
Seeking assistance with validating a button click using Cypress. The goal is to ensure the button is clickable only when slides are available. If no slides are present, the button should be disabled by adding a disabled class. Any recommendations for impro ...
I have multiple images placed in divs adjacent to each other as shown below: <div id='images'> <div class="iphoneimage"> <img src="img1.jpg" height="300"> <h5 class="size">1363 x 2048</h5> &l ...
When I scrape data from a website, sometimes the milage is displayed and other times it shows MPG in vehicle descriptions. Below is the HTML code: I initially used xpath to go through the order as shown here: def init_driver(): options = webdrive ...
I am encountering an issue where the feed does not refresh with new news as they come in, even after selecting an option. This same problem is also occurring with openweather. I suspect that everything is being cached when it shouldn't be. Should I ch ...
I discovered a helpful script on how to select all contents of a textbox when it receives focus using JavaScript or jQuery. My attempt to implement this in IE10 revealed that the focus was being cleared at a later time, and my efforts to prevent this (whi ...
Is there a workaround for generating an HTML character code that resembles Time? Perhaps manipulating another character code to create a similar effect, or utilizing a font with symbols suitable for representing time. ...
attempting to load data using ajax, encountering the following error message: Uncaught TypeError: Illegal invocation. The issue appears to stem from my php file as I am unsure how to pass database values to my like.php file. using jquery JavaScript: < ...
Currently working with GWT and have an Image Resource object in use. For instance, ImageResource image = ClientResources.of().images().icon(); Looking to add some CSS styles to this image, however being that it's an ImageResource and not an Image o ...
My current challenge involves displaying a preview of attachments. I want to show an IMAGE SVG preview for image attachments and a PDF preview for PDF attachments, both based on their respective base64 formats. For example, I am currently using the split m ...