Indicoderz

CSS Glowing Loader Ring Animation

Hello friends, today we will see you in this blog you'll learn how to create CSS Glowing Loader Ring Animation html and css codes for website| HTML Website Tutorials indicoderz .Earlier I have shared a blog on how to create a CSS Glowing Loader Ring Animation html and css codes for website| HTML Website Tutorials indicoderz Generally.

Pure CSS Glowing Loader Ring Animation [Source Codes]

To create this program CSS Glowing Loader Ring Animation First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this CSS Glowing Loader Ring Animation from the below download button.

HTML CODE:-

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Glowing Loader Ring Animation</title> </head> <body> <div class="container"> <div class="center"></div> <h1>Loading</h1> </div> </body> </html>

CSS CODE :-

*{ padding: 0; margin: 0; font-family: 'Quicksand', sans-serif; } body{ background: #2b2b2b; } .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 350px; height: 350px; border: 8px solid #434343; border-radius: 50%; background: #2b2b2b; } .container::before{ content: ''; position: absolute; top: -8px; left: -8px; width: 100%; height: 100%; border-radius: 50%; border: 8px solid #ff0; border-color: #ff0 #ff0 transparent transparent; transform: rotate(-45deg); animation: animateContainerBefore 2s infinite linear; } .container .center{ position: absolute; top: 50%; left: 50%; transform: translate(0,-50%); width: 50%; height: 5px; background: transparent; animation: animateCenter 2s infinite linear; } .container .center::before{ content: ''; position: absolute; top: 0; right: 0; transform: translate(54%,-50%); width: 50px; height: 50px; background: #ff0; box-shadow: 0 0 10px #ff0; border-radius: 50%; } @keyframes animateCenter{ 0%{transform-origin: left; transform: translate(0,-50%) rotate(0); } 100%{ transform-origin: left; transform: translate(0,-50%) rotate(360deg); } } @keyframes animateContainerBefore{ 0%{ transform: rotate(-45deg); } 100%{ transform: rotate(315deg); } } .container h1{ position: relative; text-align: center; line-height: 350px; color: #ff0; font-size: 50px; letter-spacing: 5px; text-shadow: 0 0 10px #ff0; }

Helping all of you to make us happy CSS Glowing Loader Ring Animation how did you feel about us

SUBSCRIBE to our YouTube channel, visit to:
https://www.youtube.com/channel/UCjKe1G5UC51XYi3j58LPd_Q

*********************************************

Follow indicoderz on Instagram
https://www.instagram.com/indicoderz/

**********************************************

Follow indicoderz on Website
https://indicoderz.blogspot.com

**********************************************

Follow indicoderz on Twitter
https://www.twitter.com/indicoderz

*********************************************
Follow indicoderz on Iinkedin
https://www.linkedin.com/indicoderz

**********************************************

Follow indicoderz on Facebook
https://www.facebook.com/Theindicoderz

******************************************

Subscribe Indicoderz on YouTube
https://www.youtube.com/channel/UCjKe1G5UC51XYi3j58LPd_Q
********************************************

Tags CSS

Ad

Post a Comment

Post a Comment

Contact Form

Ad

Why CSS Glowing Loader Ring Animation Is Trending Right Now

You might like

Post a Comment

Post a Comment

Contact Form