I am using glyphicon in kendogrid. I want the glyphicon to blink after a fixed interval of time. My glyphicon is

<span class="glyphicon glyphicon-one-fine-white-dot blink" title="{{ConsoleLabels.TTP_SENDING}}"></span>

I am using glyphicon in kendogrid. I want the glyphicon to blink after a fixed interval of time. My glyphicon is

<span class="glyphicon glyphicon-one-fine-white-dot blink" title="{{ConsoleLabels.TTP_SENDING}}"></span>

• javascript
• css
• glyphicons

Share Improve this question Follow edited May 26, 2016 at 14:49 Gaurang Tandon 6,8191111 gold badges5151 silver badges9595 bronze badges asked Mar 10, 2016 at 5:06 Rajesh ChoudharyRajesh Choudhary 21933 silver badges1313 bronze badges 3

• why is happening, is your code broken, you have a error, you don't achieve the desired function? – madalinivascu Commented Mar 10, 2016 at 5:13
• i want to do it using javascript or jquery,i dont have any idea about this – Rajesh Choudhary Commented Mar 10, 2016 at 5:15
• you can do it with css animations – madalinivascu Commented Mar 10, 2016 at 5:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Add this css in your page

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

Note: For older version use prefixes

Since you want to do it using javascript or jquery, here's a simple way to blink text (via opacity). The element will still keep it's proportions as a block but be hidden from view.

var value = false;
setInterval(function(){  
  value = !value;
  $('[data-blink]').css('opacity', Number(value))
}, 500)

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<<span data-blink>Blinking Text</span>>