「progressbar Animated bootstrap」という見た目でプログレスバーを作ることはできないのだろうか。横にストライプが入っています。
質問する
17592 次
3 に答える
3
別の回答で、これを行う方法を説明しました。jewelsea が言ったように、穴の進行状況バーをタイムラインでアニメーション化しました。ただし、実行時にルックアップやスタイルの変更がなければ (どちらも実際には推奨されません)。
もう少し css を書く必要がありますが、CPU をあまり使用せずにスムーズに実行されます。
ここで、jewelsea から編集されたコード:
ファイル: 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();
}
}
そして完全な CSS:
ファイル: 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%
);
}
于 2014-12-18T08:35:46.080 に答える