sonar.scss

Animated attention seekers

Fork on Github Download (v0.1.0)

By Alejandro U. Alvarez • MIT License

documentation

# Getting started

Add sonar as a class to any element to activate.

Use sonar-infinite to make the animation loop forever.


# Animations

You can use sonar-stroke for border animation, or sonar-fill for background animation.


# Triggers

Use sonar-hover or sonar-click for custom triggers


# Delay

Use sonar-delay to set the animation delay to 1s. You can also use sonar-delay-short, sonar-delay-shorter, sonar-delay-long and sonar-delay-longer for different timings


# Colors

Sonar will inherit the border/background colors. But sonar supports all the bootstrap colors, so you can use sonar-default, sonar-primary, sonar-success, sonar-info, sonar-warning, and sonar-danger.

All colors are compatible with sonar-stroke and sonar-fill

Hover to activate:
primary warning info danger