I'm struggling to implement a progress bar with animation. It seems to work fine when there is no inner text, but as soon as I add some text, the width calculations get messed up. I've experimented with different width() functions and tried adding up each segment individually, but for some reason, the text keeps throwing off the width.
Here's my current implementation - JSFiddle
To make your segment class flexible, just include flex: 1;.
The usage of
flex: <positive-number>:This is equal to setting
. It makes the flex item flexible and sets the flex basis to zero, allowing the item to receive the specified proportion of free space within the flex container. If all items in the flex container follow this pattern, their sizes will be proportional to the specified flex factor.flex: <positive-number> 1 0
Source: W3C
Updated Class:
.progressBar.large .seg {
min-height: 40px;
flex: 1; /* New property */
}
Code Snippet:
/** Progress Bar Animation **/
function animate_progress_bar() {
if (!$('.progressBar').length) {
return false;
}
$('.progressBar').each(function() {
var num_total = $(this).find('.seg').length;
var num_fill = $(this).find('.fill').length;
var percent = 100 - ((num_fill / num_total) * 100);
var speed = 2000 / num_fill;
$(this).find('.progradient').animate({
'width': percent + '%'
}, speed);
});
}
animate_progress_bar();.flex {
display: -webkit-flex;
display: flex;
}
.flex > * {
-ms-flex: 0 1 auto;
}
.progressBar {
display: -webkit-flex;
display: flex;
border: 1px solid #000;
border-radius: 20px;
overflow: hidden;
position: relative;
margin-bottom: 40px;
}
.progressBar .seg {
-webkit-flex-grow: 1;
flex-grow: 1;
min-height: 20px;
border-right: 1px solid #000;
z-index: 2;
}
.progressBar .seg:last-of-type {
border-right: 0;
}
.progressBar:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to right, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}
.progressBar .progradient {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: #fff;
}
.progressBar.large {
border-radius: 40px;
}
.progressBar.large .seg {
min-height: 40px;
flex: 1;
}
.progressBar.large .text {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-align-self: center;
align-self: center;
font-size: 18px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="max-width: 160px">
<div class="progressBar small">
<div class="seg fill"></div>
<div class="seg fill"></div>
<div class="seg"></div>
<div class="seg"></div>
<div class="seg"></div>
<div class="progradient"></div>
</div>
</div>
<div class="progressBar large">
<div class="seg fill"></div>
<div class="seg fill"></div>
<div class="seg fill"></div>
<div class="seg"></div>
<div class="seg"></div>
<div class="progradient"></div>
</div>
<div class="progressBar large">
<div class="seg fill flex">
<div class="text">Test</div>
</div>
<div class="seg fill flex">
<div class="text">Test</div>
</div>
<div class="seg fill flex">
<div class="text">Test</div>
</div>
<div class="seg"></div>
<div class="seg"></div>
<div class="progradient"></div>
</div>I am new to KnockoutJS and I have successfully worked with static data in dropdown lists. Now, I need to dynamically populate the dropdown list from a controller. 1. I want to retrieve a dynamic list from my controller and populate it in a dropdown list. ...
Currently, I am involved in a Rails project that utilizes RSpec for testing. We rely on various Rails fixture data to test our UI under different conditions. Recently, I came across TestCafe for handling functional UI testing, and I find it quite intrigui ...
After switching from Grunt to Gulp recently, I find myself still learning the ropes. Can anyone shed some light on the distinction between using Gulp-Browserify versus just Browserify? I've heard that Gulp-Browserify has been blacklisted and seen som ...
Seeking assistance with parsing data from a website. The JSON request runs successfully in the command line but encounters issues when attempting to execute it on Android: The request: "curl '' -H 'Host: billetterie.ctm.ma' -H &apo ...
Hey there, I'm currently working on creating a menu with both side and top elements. However, I've encountered an issue while trying to align the icons and names to the right using position:absolute and right:0px. The problem arises because my bo ...
Instructions for calling a function inside another function using jQuery's onclick event Here is an example code snippet: function function_one() { function function_two() { alert("Activate this function with the oncli ...
I'm working on a directive that has the ability to use dynamic templates with expressions inside them. The challenge I face is if I use ng-bind-html, the expression won't be evaluated properly. On the other hand, using ng-bin-template results in ...
Check out this code snippet: <p class="faq" onclick="toggleVisibility('answer1');"> How can I restrict email sending on my website? </p> <div id="answer1" class="hide"><sometext></div> these are my CSS styles! ...
The div I'm working with has unique colors for the border-bottom and border-right properties, creating a diagonal line that separates the box at a 45 degree angle. I'm looking to adjust the bottom-border to be shorter in order for the right bord ...
After reading up on best practices, I've learned the importance of encoding any URL passed to another source. This article explains it further: I recently wanted to share the current track time of a song I was listening to. With the help of the youru ...
To better grasp what I need to do, I simplified the task at hand: we have a lengthy nodejs process with numerous queued async functions, making it impossible to predict when they will finish. Our goal is to create an update process that stores the current ...
Is there a way in JavaScript to retrieve the indexes of undefined array elements without using a loop? Possibly utilizing a combination of map, filter, and indexOf? I have a loop solution that I'm seeking an alternative for - something more concise, ...
Within a <canvas> element, I have incorporated two images. var ctx = document.getElementById('canvas').getContext('2d'); var img1 = new Image(); img1.src = 'cloud.jpg'; img1.name = "Image 1"; img1.onload = function() { ...
One interesting example in my code. var array=[[1,'a'],[1,'b'],[2,'c'],[2,'b'],[2,'d'],[3,'a'],[3,'s'],[3,'w'],[3,'q'],[4,'w']] Desired output is as below ...
I am facing an issue with a component that manages a boolean value in its state and has a button to toggle this value. The boolean value is obtained from an object created in a parent component. The button gets rendered when the object is created, but th ...
Utilizing the TextAngular plugin and attempting to customize a toolbar, I am striving to inject my own service (LinkService) into the module but encountering an [$injector:unpr] Unknown provider issue. module.config(function($provide, LinkService){ $p ...
Wondering how to incorporate a textview within a react-google-maps component? Successfully setting up a Google map page in React using the react-google-maps API, I've managed to insert markers and link them with polylines. import React from "react"; ...
I'm currently developing a spring boot REST API that only exposes the backend logic. One of the functionalities we have is the forgot password feature, which requires sending an email to the user. To achieve this, I have implemented the thymeleaf temp ...
When I click the input, my background changes color as expected. However, the src of the input only changes on the second click. How can I make it change the source on the first click? Also, how can I change the src back to the original with a second cli ...
I am encountering an issue with my HTML document that has multiple pages utilizing jQuery Mobile's data-role="page". Specifically, I am attempting to trigger a panel on the second page and running into the following error: Error: cannot read proper ...