Animated Status for Bricks Builder

Customize your status pulse effect using the controls below
Click Copy JS to copy the JavaScript code to clipboard
In Bricks Builder, add a Code element
Paste the JavaScript code
To add the effect to any text element: go to Section → Style → Attributes, add data-pulse-dot as attribute name (leave value empty)
NEW: You can now customize each pulse individually using the attributes below!

Each element with data-pulse-dot can be customized using these additional attributes:

Attribute	Description	Example Value
`data-pulse-size`	Size of the dot in pixels	`12`
`data-pulse-color`	Color of the pulse	`#ff0000`
`data-pulse-speed`	Animation speed in seconds	`2.0`
`data-pulse-scale`	Maximum scale of pulse	`2.5`
`data-pulse-opacity`	Core opacity (0-100)	`80`
`data-pulse-spacing`	Space between dot and text	`12`
`data-pulse-shadow-enabled`	Enable/disable glow (true/false)	`false`
`data-pulse-shadow-blur`	Glow intensity in pixels	`15`
`data-pulse-animation-style`	Animation type	`grow`, `fade`, `both`, `double`
`data-pulse-timing-function`	CSS timing function	`ease-in-out`
`data-pulse-pause-hover`	Pause on hover (true/false)	`true`

Interactive Status Pulse Preview

Pulse Appearance

Pulse Size

8px

Pulse Color

HEX

HSL

Core Opacity

100%

Animation Settings

Animation Speed

1.5s

Pulse Scale

Animation Style

Timing Function

Advanced Options

Enable Glow Shadow

Shadow Blur

10px

Spacing

8px

Pause on Hover

Documentation