Hi!
this is a quick tutorial to make a Pulse Loading with only HTML and CSS!
HTML
<div class="pulse-wrapper">
<div class="pulse"></div>
</div>
CSS
/* this is to keep you loading wrapper on the middle of screen */
div.pulse-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
div.pulse {
height: 50px;
width: 50px;
background-color: rgb(199, 153, 8);
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
40% {
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(199, 153, 8, 0.3);
}
80% {
transform: scale(1);
box-shadow: 0 0 0 40px rgba(199, 153, 8, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(199, 153, 8, 0)
}
}
and that's all folks!
Top comments (0)