CODEWITHSUNDEEP
javascripthtmlangular
Developer
Developer

Reputation: 1

How to make browser icon highlight or blink on taskbar when notification are arrive using JavaScript/HTML?

I want to make browser icon highlight when notification or message are arrived. I need to implement it in my angular project. So any suggestion how to achieve it?

Upvotes: 0

Views: 818

Answers (1)

Abru007
Abru007

Reputation: 481

on css

   @-webkit-keyframes blinker {  
      0% { opacity: 1.0; }
      50% { opacity: 0.0; }
      100% { opacity: 1.0; }
    }

    .blink {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      animation: blinker 2s linear infinite;
      background-color: red;
      margin-right: 5px;
    }
    
    .main-content {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

on html

     <div class="main-content">
      <i class="blink"></i>
     </div>


@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}
<div class="content">
  <i class="blink"></i>
</div>

for blink just use @-webkit-keyframes blinker and set the delay according choice

Upvotes: 2

Related Questions