app/resources/qml/components/BatteryIndicator.qml

import QtQuick 2.0

Rectangle {
    id: control

    property color chargingColor: "green"
    property color fineColor: "green"
    property color warningColor: "orange"
    property color criticalColor: "red"
    property color unknownColor: "grey"
    property color backgroundColor: "white"
    property double indicatorSize: 1

    height: app.height * 0.9
    width: height * 0.8

    color: backgroundColor

    border.width: Math.min(width * 0.1, height * 0.1) * control.indicatorSize
    border.color: "green"
    radius: border.width

    state: "charging"

    Rectangle {
        id: outerRect

        anchors {
            right: parent.left
            rightMargin: parent.border.width * 0.25
            verticalCenter: parent.verticalCenter
        }

        width: parent.border.width
        height: parent.height * 0.5
        radius: width * 0.5

        color: parent.border.color
    }

    Rectangle {
        id: innerRect

        property double amountFilled: 1

        anchors {
            top: parent.top
            bottom: parent.bottom
            right: parent.right

            margins: parent.border.width * 1.5
        }

        width: (parent.width - parent.border.width * 3) * amountFilled

        radius: control.radius * 0.5

        border.width: 0

        color: control.border.color

        Rectangle {
            id: chargingRect

            property double amountFilled: 0

            anchors {
                top: parent.top
                bottom: parent.bottom
                right: parent.right
            }

            width: parent.width * amountFilled

            radius: innerRect.radius

            color: Qt.darker(innerRect.color, 1.5)
        }
    }


    ParallelAnimation {
        id: chargingAnimation

        running: false

        loops: Animation.Infinite
        alwaysRunToEnd: true

        NumberAnimation {
            target: chargingRect

            properties: "amountFilled"

            from: 0
            to: 1

            duration: 3000

            easing.type: Easing.OutQuad
        }

        NumberAnimation {
            target: chargingRect

            properties: "opacity"

            from: 1
            to: 0

            duration: 3000

            easing.type: Easing.Linear
        }
    }

    states: [
        State {
            name: "charging"
            PropertyChanges {
                target: control
                border.color: control.chargingColor
            }

            PropertyChanges {
                target: innerRect
                amountFilled: 1
            }

            PropertyChanges {
                target: chargingAnimation
                running: true
            }
        },

        State {
            name: "fine"
            PropertyChanges {
                target: control
                border.color: control.fineColor
            }

            PropertyChanges {
                target: innerRect
                amountFilled: 1
            }
        },

        State {
            name: "warning"
            PropertyChanges {
                target: control
                border.color: control.warningColor
            }

            PropertyChanges {
                target: innerRect
                amountFilled: 0.3
            }
        },

        State {
            name: "critical"
            PropertyChanges {
                target: control
                border.color: control.criticalColor
            }

            PropertyChanges {
                target: innerRect
                amountFilled: 0.1
            }
        }

    ]

    transitions: [
        Transition {
            NumberAnimation {
                properties: "amountFilled"
                duration: 400
                easing.type: Easing.InOutQuad
            }


            ColorAnimation {
                properties: "color,border.color"
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    ]

}