pulse_dot

by John Doe

HTML

<div class="pulse_icon">
<div style="display: block; width: 6px; height: 6px; border-radius: 50%; background: #ffc107; cursor:pointer; animation: pulse 1s infinite;"></div>
</div>

CSS

body {
background-color: black;
}

.pulse_icon {
}

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(204, 44, 44, 0.4);
	}
  70% {
		-webkit-box-shadow: 0 0 0 10px rgba(204,44,44, 0);
	}
  
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(204,168,44, 0);
	}
}

@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(204,168,44, 0.4);
		box-shadow: 0 0 0 0 rgba(204,168,44, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 10px rgba(204,168,44, 0);
		box-shadow: 0 0 0 10px rgba(204,168,44, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(204,168,44, 0);
		box-shadow: 0 0 0 0 rgba(204,168,44, 0);
	}
}