No animated gif. No jQuery animation. No additional image. Just pure CSS3 animation coolness.
Add this in additional css template or via Sitebuilder > Style > CSS Editor:
Enjoy!
Add this in additional css template or via Sitebuilder > Style > CSS Editor:
Code:
.b-icon__status--green:after { content: ''; border: 10px solid #6e9d00; /* green, change as needed */ background: transparent; border-radius: 40px; height: 40px; width: 40px; position: absolute; top: -24px; /* you may have to tweak this if you move it from the default position */ left: -22px; /* you may have to tweak this if you move it from the default position */ z-index: 1; opacity: 0; -webkit-animation: glow 3s ease-out infinite; animation: glow 3s ease-out infinite; } @-webkit-keyframes glow { 0% { -webkit-transform: scale(0); opacity: 0.0; } 25% { -webkit-transform: scale(0); opacity: 0.1; } 50% { -webkit-transform: scale(0.1); opacity: 0.3; } 75% { -webkit-transform: scale(0.5); opacity: 0.5; } 100% { -webkit-transform: scale(1); opacity: 0.0; } } @keyframes glow { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transform: scale(0.1); opacity: 0.3 } 75% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.0; } }
Comment