jQuery Plugin For Adding Animated Borders Around Elements

A lightweight jQuery plugin which enables you to add an animated border around any block level element.

It does this by adding 4 absolutely positioned divs around the element. The 4 highlight divs use an animated gif with white blocks and transparent areas. This allows the background of the div to be visible and be treated as the color of the animated border.

See also:

• Border Animation Effects with jQuery and CSS3 - Line.js
• jQuery Plugin For CSS3 Based Border Animations - RollingBorder
• jQuery Plugin To Animate Color Of Element Border - BorderColorAnimate
• jQuery Plugin To Animate Borders Using CSS3 - Live Border

Installation:

# NPM
$ npm install animatedborder --save

How to use it:

1. Load the jQuery Animated Border plugin after you have jQuery library installed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.animatedborder.js"></script>

2. This plugin requires 3 style rules. If you have to remake the animated gif, you should build an 8x8 2 frame gif animation, with a 4x4 checkerboard grid made of white and transparent blocks.

.animatedBorderSprite {
  position: absolute;
  margin: 0;
  background: url(stripe.gif)
}

.animatedBorderSprite-top {
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.animatedBorderSprite-bottom {
  -webkit-border-bottom-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

4. Call the plugin on the target block level element you want to produce the animated border.

$('.container').animatedBorder({

// border size
size: 2,

// border color
color: '#6699CC',

// true = display the animatied border on hover
hover: false

});

Change log:

2017-10-21

• v1.0.0

---

This awesome jQuery plugin is developed by there4. For more Advanced Usages, please check the demo page or visit the official website.