Skip to content

Instantly share code, notes, and snippets.

@danieloneill
Last active June 22, 2022 02:31
Show Gist options
  • Save danieloneill/e32ecbddc93ec4103471 to your computer and use it in GitHub Desktop.
Save danieloneill/e32ecbddc93ec4103471 to your computer and use it in GitHub Desktop.
Animated pulser/throbber with QML and Qt 5 (http://youtu.be/xJEtOvezcU0)
import QtQuick 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Rectangle {
id: throbber
property color colourLow: '#ee303030'
property color colourHigh: '#aa808080'
property bool running: visible && opacity > 0
property alias speed: coneRotationAnimation.duration
width: 200
height: 200
Rectangle {
id: rect
color: 'transparent'
anchors.fill: parent
radius: 100
ConicalGradient {
id: rotatingGradient
anchors.fill: parent
gradient: Gradient {
GradientStop {
color: throbber.colourLow
position: 0
}
GradientStop {
color: throbber.colourHigh
position: 0.5
}
GradientStop {
color: throbber.colourLow
position: 1
}
}
visible: false
}
Rectangle {
id: mask
anchors.fill: parent
radius: 100
border.color: 'black'
border.width: 5
color: 'transparent'
smooth: false
visible: false
}
OpacityMask {
anchors.fill: rect
source: rotatingGradient
maskSource: mask
}
}
PropertyAnimation {
id: coneRotationAnimation
loops: Animation.Infinite
target: rotatingGradient
running: throbber.running
property: "angle"
from: 0
to: 360
duration: 1000
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment