@maxigalaxi/vue-status-indicator/dist/status-indicator.css

A simple, customizable status indicator component for Vue 3

:root{--status-indicator-size: 10px;--status-indicator-animation-duration: 2s}.status-indicator{display:inline-block;border-radius:50%;cursor:pointer;width:var(--status-indicator-size);height:var(--status-indicator-size);background-color:var(--status-indicator-color, rgb(216, 226, 233))}.status-indicator.active{background-color:var(--status-indicator-color-active, rgb(0, 149, 255))}.status-indicator.positive{background-color:var(--status-indicator-color-positive, rgb(75, 210, 143))}.status-indicator.intermediary{background-color:var( --status-indicator-color-intermediary, rgb(255, 170, 0) )}.status-indicator.negative{background-color:var(--status-indicator-color-negative, rgb(255, 77, 77))}@keyframes status-indicator-pulse{0%{box-shadow:0 0 #d8e2e980}70%{box-shadow:0 0 0 var(--status-indicator-size) #d8e2e900}to{box-shadow:0 0 #d8e2e900}}.status-indicator.pulse{animation:status-indicator-pulse var(--status-indicator-animation-duration) infinite}.status-indicator.active.pulse{animation-name:status-indicator-pulse-active}.status-indicator.positive.pulse{animation-name:status-indicator-pulse-positive}.status-indicator.intermediary.pulse{animation-name:status-indicator-pulse-intermediary}.status-indicator.negative.pulse{animation-name:status-indicator-pulse-negative}@keyframes status-indicator-pulse-active{0%{box-shadow:0 0 #0095ff80}70%{box-shadow:0 0 0 var(--status-indicator-size) #0095ff00}to{box-shadow:0 0 #0095ff00}}@keyframes status-indicator-pulse-positive{0%{box-shadow:0 0 #4bd28f80}70%{box-shadow:0 0 0 var(--status-indicator-size) #4bd28f00}to{box-shadow:0 0 #4bd28f00}}@keyframes status-indicator-pulse-intermediary{0%{box-shadow:0 0 #ffaa0080}70%{box-shadow:0 0 0 var(--status-indicator-size) #fa00}to{box-shadow:0 0 #fa00}}@keyframes status-indicator-pulse-negative{0%{box-shadow:0 0 #ff4d4d80}70%{box-shadow:0 0 0 var(--status-indicator-size) #ff4d4d00}to{box-shadow:0 0 #ff4d4d00}}