アイコンはアイコンフォントにあるものを使用し、その上にプログレスバーを重ねただけの誰でも考えつくタイプですが、充電中は別のアイコンが表示されるようにしたかったので、演算子を使ってアイコンが切り替わるようにしました。ただ、充電完了後も電源供給されている状態ではアイコンがそのままなので、充電が完了したら通常のアイコンに戻るように工夫してあります。
アイコンの作成
Root下に
【アイコンフォント】
「Material：Battery_charging_full」
【プログレスバー】
「バッテリー（リニア、フラット）」
のふたつを追加し、アイコンのサイズ内にプログレスバーが収まるように、それぞれのサイズや位置、そして向きを調整して重ねて設置します。この時、アイコン側の色を変えておくとサイズ調整がしやすくなります。
好みで配色なども整えたらとりあえずアイコンは完成。
次に、充電中は「プログレスバー」を非表示にさせ、その下の充電中アイコンが現れるようにするために、「プログレスバー」の「アニメ」に以下の内容で追加します。
・実行：数式
・演算子 ：下記を記述
・アクション：消失
・他はお好みで
$if(bi(level)<100,bi(charging)=1,0)$
この演算子は、
「バッテリーレベルが100未満（～99）の時、充電中は非表示に、それ以外は表示」
という設定です。これにより通常時とバッテリーレベルが100の時にだけプログレスバーが表示されるようになります。
以上で完成です。
今回はアイコンを使用しましたが、これを画像にしたらもっと面白い表現ができそうですね。他にも方法はいろいろあるので、好きな方法を見つけてみてください。
おまけ
バッテリーレベルが「100」の時の数値表示を「FULL」にする演算子の記述
$if(bi(level)=100,"FULL",bi(level))$
数値を％表示にしたい場合は赤字部分を追加
$if(bi(level)=100,"FULL",bi(level)+"%")$