A simple pointing arrow that slides left to right.

pointing_arrow

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style>
  #triangle-right {
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-left: 50px solid red;
		border-bottom: 30px solid transparent;
	}
	#rectangle {
		width: 50px;
		height: 20px;
		margin-top:15px;
		background: red;
	}
	.float_left
	{
		float:left;
	}

	.border
	{
		width:100px;
		height:50px;
		//border:1px solid black;
	}

	#box
	{
	    color: white;
	    position: absolute;
	    left: 0px;
	    top: 50px;
	    text-align: center;
	}

	.rounded
	{
		background:black;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}

	.center_of_something
	{
		width: 100px;
		height: 50px;
		color: white;
		margin: 0 auto;
		margin-top: 36px;
	}
</style>

<div id="box" class="border rounded">
	<div class="center_of_something">
		<div id="rectangle" class="float_left">
		</div>
		<div id="triangle-right" class="float_left">
		</div>
	</div>
</div>

<script>
	var speed = 700;
	var times = 500;
	var loop = setInterval(anim, 800);
	function anim(){
	    times--;
	    if(times === 0){clearInterval(loop);}
	    $('#box').animate({left:50},speed).animate({left:0},speed);
	    //$('#box').animate({left:50,opacity:0},speed).animate({left:0, opacity:1},speed);

	}
	anim()
</script>