How to add flashing animation in Trellis View

Raymond2T · ‎11-20-2023

I have a singlevalue trellis view showing the status of items up (Green) and down (Red).

When the status is down (Red), i would like to get the trellis view to flash or blink.

I found below html code for blinking effect

<html>
        <style>
          @keyframes blink {
            100%,
            0% {
              opacity: 0.6;
            }
            60% {
              opacity: 0.9;
            } 
          }
          #singlevalue rect {
            animation: blink 0.8s infinite;
          }
        </style>
      </html>

However, it will make all singlevalue are blinking.
I am using rangemap to make the background of singlevalue in Red/Green color.

How can I specify the trellis will blink in Red color only?

Thanks a lot.

tscroggins · ‎11-24-2023

Hi @Raymond2T,

In Simple XML dashboards, you can use the deprecated but still functional classField option. For example, if you have a field named range with values green and red, use:

<single>
  <search>
    <!-- ... -->
  </search>
  <option name="classField">range</option>
  <!-- ... -->
</single>

When trellis is enabled, the resulting div element will have an additional class of either green or red, depending on the value of that row's range field:

<div id="singlevalue" class="single-value shared-singlevalue red" ...>

You can adjust your stylesheet to include the green and red classes as desired:

<style>
  @keyframes blink {
    100%,
    0% {
      opacity: 0.6;
    }
    60% {
      opacity: 0.9;
    } 
  }
  .single-value.red rect {
    animation: blink 0.8s infinite;
  }
</style>

How to add flashing animation in Trellis View

CSS

Dashboard Studio

single value

Splunk Decoded: Service Maps vs Service Analyzer Tree View vs Flow Maps

What’s New in Splunk Observability – September 2025

Fun with Regular Expression - multiples of nine

Are you a member of the Splunk Community?

How to add flashing animation in Trellis View

CSS

Dashboard Studio

single value

Splunk Decoded: Service Maps vs Service Analyzer Tree View vs Flow Maps

What’s New in Splunk Observability – September 2025

Fun with Regular Expression - multiples of nine