Glowing Breathing Status Knob

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="breath-knob"><div class="breath-led"></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.breath-knob { width: 70px; height: 70px; border-radius: 50%; background: #1e293b; box-shadow: 6px 6px 12px #0f172a, -6px -6px 12px #2d3748; position: relative; display: flex; align-items: center; justify-content: center; }
.breath-led { width: 10px; height: 10px; border-radius: 50%; background: #38bdf8; animation: breathGlow 2.5s infinite ease-in-out; }
@keyframes breathGlow { 0%, 100% { box-shadow: 0 0 4px #38bdf8, 0 0 8px #38bdf8; transform: scale(0.8); opacity: 0.5; } 50% { box-shadow: 0 0 12px #38bdf8, 0 0 22px #38bdf8; transform: scale(1.2); opacity: 1; } }