ProgressBar with animated stripes [duplicate] - javafx

Question

I wonder if it is possible to make a progressbar with the appearance,"progressbar Animated bootstrap". With stripes going sideways.
http://getbootstrap.com/2.3.2/components.html#progress

Answer 1

ProgressBar with Static Stripes
Here is a JavaFX ProgressBar which looks like a static striped progress bar from Bootstrap.
The stripe gradient is set entirely in css, the Java code is just a test harness.
File: striped-progress.css
.progress-bar > .bar {
-fx-background-color: linear-gradient(
from 0px .75em to .75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
File: StripedProgress.java
import javafx.animation.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/** Displays progress on a striped progress bar */
public class StripedProgress extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
ProgressBar with Animated Stripes
JavaFX has good animation facilities which will allow you to animate the gradient within the progress bar if you wish.
One way to do that is to do a node lookup on the bar after the bar has been displayed on the screen and modify the style property of the bar in a Timeline, similar to the technique applied in: How to make an animation with CSS in JavaFX?
Personally, I find animated stripes on progress bars annoying.
Writing the actual code for this is left as an exercise for the reader.

Answer 2

In another answer I have explained how to do this.
Like jewelsea said, I animated the hole progress-bar with a timeline. But without a lookup or style change on runtime(both is not really recommended).
You must write a bit more css but then it runs smoothly and without much CPU usage.
Here the edited code from jewelsea:
File: StripedProgress.java
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
// Set the max status
int maxStatus = 12;
// Create the Property that holds the current status count
IntegerProperty statusCountProperty = new SimpleIntegerProperty(1);
// Create the timeline that loops the statusCount till the maxStatus
Timeline timelineBar = new Timeline(
new KeyFrame(
// Set this value for the speed of the animation
Duration.millis(300),
new KeyValue(statusCountProperty, maxStatus)
)
);
// The animation should be infinite
timelineBar.setCycleCount(Timeline.INDEFINITE);
timelineBar.play();
// Add a listener to the statusproperty
statusCountProperty.addListener((ov, statusOld, statusNewNumber) -> {
int statusNew = statusNewNumber.intValue();
// Remove old status pseudo from progress-bar
bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusOld.intValue()), false);
// Add current status pseudo from progress-bar
bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusNew), true);
});
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"/styles/striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
And the full CSS:
File: striped-progress.css
.progress-bar:status1 > .bar {
-fx-background-color: linear-gradient(
from 0em 0.75em to 0.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status2 > .bar {
-fx-background-color: linear-gradient(
from 0.25em 0.75em to 1em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status3 > .bar {
-fx-background-color: linear-gradient(
from 0.5em 0.75em to 1.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status4 > .bar {
-fx-background-color: linear-gradient(
from 0.75em 0.75em to 1.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status5 > .bar {
-fx-background-color: linear-gradient(
from 1em 0.75em to 1.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status6 > .bar {
-fx-background-color: linear-gradient(
from 1.25em 0.75em to 2em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status7 > .bar {
-fx-background-color: linear-gradient(
from 1.5em 0.75em to 2.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status8 > .bar {
-fx-background-color: linear-gradient(
from 1.75em 0.75em to 2.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status9 > .bar {
-fx-background-color: linear-gradient(
from 2em 0.75em to 2.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status10 > .bar {
-fx-background-color: linear-gradient(
from 2.25em 0.75em to 3em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status11 > .bar {
-fx-background-color: linear-gradient(
from 2.5em 0.75em to 3.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status12 > .bar {
-fx-background-color: linear-gradient(
from 2.75em 0.75em to 3.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}

Answer 3

If anyone is interested for the animation version of #jewelsea answer, please check the below code.
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(final Stage stage) {
ObjectProperty<Node> node = new SimpleObjectProperty<>();
ProgressBar bar = new ProgressBar(0) {
#Override
protected void layoutChildren() {
super.layoutChildren();
if (node.get() == null) {
Node n = lookup(".bar");
node.set(n);
int stripWidth = 10;
IntegerProperty x = new SimpleIntegerProperty(0);
IntegerProperty y = new SimpleIntegerProperty(stripWidth);
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(35), e -> {
x.set(x.get() + 1);
y.set(y.get() + 1);
String style = "-fx-background-color: linear-gradient(from " + x.get() + "px " + x.get() + "px to " + y.get() + "px " + y.get() + "px, repeat, -fx-accent 50%, derive(-fx-accent, 30%) 50%);";
n.setStyle(style);
if (x.get() >= stripWidth * 2) {
x.set(0);
y.set(stripWidth);
}
}));
timeline.setCycleCount(Animation.INDEFINITE);
progressProperty().addListener((obs, old, val) -> {
if (old.doubleValue() <= 0) {
timeline.playFromStart();
}
});
}
}
};
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(10),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(actionEvent -> task.playFromStart());
VBox layout = new VBox(10);
layout.getChildren().setAll(bar, button);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
stage.setScene(new Scene(layout));
stage.show();
}
}