QHTML7 Behavior Animation Loop Test
The progress bar loops by setting only one property: progress.
q-component behaviorProgressBar {
q-property progress: 0%
behavior on this.progress {
q-property-animation {
duration: 1600
steps: 96
onfinished {
if (this.progress.number >= 100) {
this.progress = "0%"
} else {
this.progress = "100%"
}
}
}
}
q-style shellStyle {
display: block
padding: 18px
border: "1px solid #cbd5e1"
borderRadius: 8px
background: "#f8fafc"
}
q-style trackStyle {
display: block
width: 100%
height: 36px
padding: 4px
border: "1px solid #d8e0eb"
borderRadius: 8px
boxSizing: "border-box"
overflow: hidden
}
q-style fillStyle {
display: block
height: "100%"
borderRadius: 6px
background: "#22c55e"
}
q-style readoutStyle {
display: block
marginTop: 10px
color: "#475569"
fontSize: 13px
fontWeight: 700
}
q-default-theme behaviorLoopTheme {
.behavior-loop-shell { shellStyle }
.behavior-loop-track { trackStyle }
.behavior-loop-fill { fillStyle }
.behavior-loop-readout { readoutStyle }
}
div.behavior-loop-shell {
display: block
padding: 18px
border: "1px solid #cbd5e1"
borderRadius: 8px
background: "#f8fafc"
div.behavior-loop-track {
display: block
width: "100%"
height: 36px
padding: 4px
border: "1px solid #d8e0eb"
borderRadius: 8px
background: "#ffffff"
boxSizing: "border-box"
overflow: hidden
div.behavior-loop-fill {
display: block
width: this.progress
height: "100%"
borderRadius: 6px
background: "#22c55e"
}
}
div.behavior-loop-readout {
display: block
marginTop: 10px
color: "#475569"
fontSize: 13px
fontWeight: 700
text { progress: ${this.progress} }
}
}
onready {
this.progress = "100%"
}
}
behaviorProgressBar progressDemo { }