How To Add Neon Animation Bar Like Google Assistant At Bottom Of Website

Hello everyone! Today I am going to show you the animation code from which you can add neon glowing line animation at the bottom of your site, like Google Assistant.

Steps

• Find </b:skin> in your template/theme.
• Copy the below CSS and paste it above the </b:skin>

• /* Bottom Bar Animation by Flamingo */ .animeTWD,.animeBlurTWD{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.animeBlurTWD{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

• Now, find </footer>
• Copy the below code and paste it just above the </footer>

• <!--[ Bottom Bar Animation by Flamingo ]-->
  <div class='animeTWD'>
  <div class='animeBlurTWD'>
  </div>
  </div>