Create Animated Rolling Border by jQuery and CSS3: RollingBorder

What is RollingBorder plug-in?

The RollingBorder is small sized jQuery plug-in for creating border animation that may be used as focus state.

The usage can be getting the user’s eye as visiting the webpage to the specific section where two lines are moving to the border of that element.

Demo1 Table Demo
Developer’s page Download plug-in

How to use it?

Include the style file in the head section:

<link rel=”styleSheet” type=”text/css” href=”css/rollingBorder/jquery.rollingBorder.css”>

Also, refer the JS file before </body> tag and after the reference to the jQuery:

 <script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>

<script src=”js/rollingBorder/jquery.rollingBorder.js”></script>

Create the element like div where you want to show this border animation.

Initiate the plug-in with available options:

A demo of border animation

In this example, a div element is created with the basic CSS properties. As the demo page loads, you can see the lines moving around the div element. Two buttons are also given to stop and start the animation.

You may control the color, length, padding and width of the lines by using the options in jQuery code:

jQuery border animation

See online demo and code

The markup:

 

The jQuery code:

 

The CSS specific for this demo:

 

A rolling border example with an HTML table

Not only may you create this border animation in a div or a text element like a paragraph, but also other elements like HTML tables.

See this demo where I created a table with the basic set of CSS properties. After that, its ID is used in the jQuery code for initializing the plug-in with different values for the options than above example:

jQuery border animation table

See online demo and code

The jQuery code:

This is how table tag is used:

 

Get the complete code from the demo page.