78%
Studio One
4 h 28 min restantes
HTML + CSSCards
Device status card
A battery ring with an online dot, time left and two readings, and the ring breathes gently on hover.
Settings
16px
1x
Code
<article class="uv-cdevice"><header><i></i><span>EN LÍNEA</span><button>•••</button></header><div class="ring"><b>78<small>%</small></b><i></i></div><h3>Studio One</h3><p>4 h 28 min restantes</p><footer><span>Temperature <b>32°</b></span><span>Power <b>18 W</b></span></footer></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
Built for companion apps and control panels: the battery of an e-bike, a smart speaker in a home automation dashboard, a portable power station or a pair of wireless headphones. The ring shows the charge, with the time left and two readings underneath, so the device status reads at a glance.
The 78% fill is set in the styles, so update it together with the number when you plug in real data. Switch the green dot to grey when the device goes offline; a ring that keeps breathing while nothing is connected is misleading.