Glowing lights loader animation with pure CSS

Developer
Creative Punch
Size
2,785 Kb
Views
6,072
  1. Glowing lights loader animation with pure CSS Previews
  2. Glowing lights loader animation with pure CSS HTML Codes
  3. Glowing lights loader animation with pure CSS CSS Codes

How do I make an glowing lights loader animation with pure css?

A pure CSS loader animation that looks like light making its way from left to right, lighting up some round "bulbs". What is a glowing lights loader animation with pure css? How do you make a glowing lights loader animation with pure css? This script and codes were developed by Creative Punch on 09 December 2022, Friday.

Glowing lights loader animation with pure CSS Previews
IQ Test

Glowing lights loader animation with pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glowing lights loader animation with pure CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes shadow { 0% { background-color: rgba(30, 100, 255, 0.2); } 100% { background-color: rgba(150, 200, 255, 0.9); }
}
html { background: url(/images/textures/black-Linen.png);
}
ul#loader { display: block; position: relative; text-align: center; width: 100%; margin: 50px auto;
}
ul#loader li { display: inline-block; background-color: rgba(0, 0, 0, 0.1); padding: 3px; margin: 0px; border-radius: 30px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1);
}
ul#loader li:before { background-color: rgba(30, 100, 255, 0.2); content: ""; width: 20px; height: 20px; display: block; border-radius: 20px; box-shadow: inset -5px -5px 20px rgba(25, 255, 255, 0.2); animation: shadow 1.5s ease-in-out infinite alternate;
}
ul#loader li:nth-child(1):before { animation-delay: 0.1s;
}
ul#loader li:nth-child(2):before { animation-delay: 0.2s;
}
ul#loader li:nth-child(3):before { animation-delay: 0.3s;
}
ul#loader li:nth-child(4):before { animation-delay: 0.4s;
}
ul#loader li:nth-child(5):before { animation-delay: 0.5s;
}
ul#loader li:nth-child(6):before { animation-delay: 0.6s;
}
ul#loader li:nth-child(7):before { animation-delay: 0.7s;
}
ul#loader li:nth-child(8):before { animation-delay: 0.8s;
}
ul#loader li:nth-child(9):before { animation-delay: 0.9s;
}
ul#loader li:nth-child(10):before { animation-delay: 1s;
}
/* Demo credits stuff */
h1#author { font-weight: 400; text-align: center; color: #fff; width: 100%; padding: 10px; font-family: "Nixie One", georgia, serif; font-size: 40px;
}
h1#author a { color: #5AF; text-decoration: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<ul id="loader"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>
<h1 id="author">Demo by <a target="_blank" href="http://creative-punch.net/">Creative Punch</a></h1>
</body>
</html>

Glowing lights loader animation with pure CSS - Script Codes CSS Codes

@keyframes shadow { 0% { background-color: rgba(30, 100, 255, 0.2); } 100% { background-color: rgba(150, 200, 255, 0.9); }
}
html { background: url(/images/textures/black-Linen.png);
}
ul#loader { display: block; position: relative; text-align: center; width: 100%; margin: 50px auto;
}
ul#loader li { display: inline-block; background-color: rgba(0, 0, 0, 0.1); padding: 3px; margin: 0px; border-radius: 30px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1);
}
ul#loader li:before { background-color: rgba(30, 100, 255, 0.2); content: ""; width: 20px; height: 20px; display: block; border-radius: 20px; box-shadow: inset -5px -5px 20px rgba(25, 255, 255, 0.2); animation: shadow 1.5s ease-in-out infinite alternate;
}
ul#loader li:nth-child(1):before { animation-delay: 0.1s;
}
ul#loader li:nth-child(2):before { animation-delay: 0.2s;
}
ul#loader li:nth-child(3):before { animation-delay: 0.3s;
}
ul#loader li:nth-child(4):before { animation-delay: 0.4s;
}
ul#loader li:nth-child(5):before { animation-delay: 0.5s;
}
ul#loader li:nth-child(6):before { animation-delay: 0.6s;
}
ul#loader li:nth-child(7):before { animation-delay: 0.7s;
}
ul#loader li:nth-child(8):before { animation-delay: 0.8s;
}
ul#loader li:nth-child(9):before { animation-delay: 0.9s;
}
ul#loader li:nth-child(10):before { animation-delay: 1s;
}
/* Demo credits stuff */
h1#author { font-weight: 400; text-align: center; color: #fff; width: 100%; padding: 10px; font-family: "Nixie One", georgia, serif; font-size: 40px;
}
h1#author a { color: #5AF; text-decoration: none;
}
Glowing lights loader animation with pure CSS - Script Codes
Glowing lights loader animation with pure CSS - Script Codes
Home Page Home
Developer Creative Punch
Username CreativePunch
Uploaded December 09, 2022
Rating 3.5
Size 2,785 Kb
Views 6,072
Do you need developer help for Glowing lights loader animation with pure CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Creative Punch (CreativePunch) Script Codes
Name
Long shadow social icons with Sass
Retro text with hover
A Pen by Creative Punch
CSS3 animated sliding box without javascript.
Gradient text with CSS3
SVG blurred header
Colorful glass menu concept
Animated CSS3 social buttons
Textured text
JQuery Adaptive Slider Demo
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!