A Simple Thin Line animated with jQuery and CSS

By
transferrin
– October 5, 2010Posted in: Development

If you need a Solution to display an animated Line (e.g. to visualize a Countdown) don’t search for jQuery Plugins like timer360. It’s easier to do it yourself.

Our finished Animation looks like:

Step 1: The Container which holds the Line

<div
  id="thinLine"
  style="background-color: #000000; width: 100px; height: 1px;">
</div>

Step 2: Let’s Draw the Animation

function ProcessThinLine(tick, delay) {
 tick= tick+ 1;

 var currentPosition = (100 / delay) * tick;
 $("#thinLine").width(100 - Math.round(currentPosition)); // 100 -> div Width

 window.setTimeout("ProcessThinLine(" + tick+ "," + delay + ");", 1000);
}

Step 3: Initialize the Animation to run 5 Minutes

<script type="text/javascript">
 $(document).ready(function() {
  ProcessThinLine(0, 5 * 60);
 });
</script>

Done

Tags: , ,