CSS3 Animated Attention Seekers

Getting started

Bower

$ bower install sonar.css

npm

$ npm install sonar.css --save

Or manually add sonar.css or sonar.min.css to your website.

Documentation

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.

Using the SASS version

If you want to customize anything, clone the project and edit the sass files. If you just want to change some behavior, editing the _variables.sccs file is recommended.

You can use Grunt with the following tasks:

• grunt: This will setup up a watch on the sass files, so you can test your changes more easily. Use the index.html file provided for this.
• grunt build: This will just generate the sonar.css and sonar.min.css files.

---

Developed by Alejandro U. Alvarez - MIT License