JFoenix中文教程：7、JFXProgressBar进度条组件

JFoenix提供的进度条组件为JFXProgressBar，JFXProgressBar样式如下：

对应源码如下：

Fxml：

<StackPane>
	<VBox spacing="50" maxHeight="300">
		<HBox spacing="20" alignment="CENTER_LEFT">
			<Label>默认进度条</Label>
			<JFXProgressBar progress="0.5"></JFXProgressBar>
		</HBox>
		<HBox spacing="20" alignment="CENTER_LEFT">
			<Label>自定义进度条</Label>
			<JFXProgressBar progress="0.5" styleClass="custom-jfx-progress-bar-stroke"></JFXProgressBar>
		</HBox>
		<HBox spacing="20" alignment="CENTER_LEFT">
			<Label>默认动态进度条</Label>
			<JFXProgressBar></JFXProgressBar>
		</HBox>
		<HBox spacing="20" alignment="CENTER_LEFT">
			<Label>自定义动态进度条</Label>
			<JFXProgressBar styleClass="custom-jfx-progress-bar-stroke"></JFXProgressBar>
		</HBox>
		<HBox spacing="20" alignment="CENTER_LEFT">
			<Label>默认动态变动进度条</Label>
			<JFXProgressBar fx:id="progress" progress="0" styleClass="custom-jfx-progress-bar-start"></JFXProgressBar>
			<JFXButton prefWidth="80" prefHeight="30" buttonType="RAISED" text="开始" onAction="#start"
					   style="-fx-font-size: 12px; -fx-background-color: #3CB371;"/>
			<JFXButton prefWidth="80" prefHeight="30" buttonType="RAISED" text="结束" onAction="#end"
					   style="-fx-font-size: 12px; -fx-background-color: #FF8C00;"/>
		</HBox>
		<StackPane.margin>
			<Insets>
				<left>50</left>
				<right>50</right>
				<top>50</top>
			</Insets>
		</StackPane.margin>
	</VBox>
</StackPane>

CSS：

.custom-jfx-progress-bar-stroke > .bar {
    -fx-background-color: #5264AE;
    -fx-padding: 6;
}

.custom-jfx-progress-bar > .secondary-bar {
    -fx-background-color: rgba(255, 135, 21, 0.45);
}

.custom-jfx-progress-bar > .bar {
    -fx-background-color: #ff8000;
}

.custom-jfx-progress-bar-start > .bar {
    -fx-background-color: #ff8000;
    -fx-padding: 6;
}

Java：

@FXMLController
public class JFoenixViewController {

    @FXML
    private JFXProgressBar progress;

    private Timeline task;

    public void start() {
        task = new Timeline(
                new KeyFrame(
                        Duration.ZERO,
                        new KeyValue(progress.progressProperty(), 0)),

                new KeyFrame(
                        Duration.seconds(2),
                        new KeyValue(progress.progressProperty(), 1))
        );
        task.setCycleCount(Timeline.INDEFINITE);
        task.play();
    }

    public void end() {
        task.stop();
    }
}

其中，progress 用于设置进度条的初始值，如果不设置，则 JFXProgressBar 默认为 -1.0D （即动态效果）。