Light bulb svg loader

Developer
Chris Maki
Size
2,344 Kb
Views
80,960
  1. Light bulb svg loader Previews
  2. Light bulb svg loader HTML Codes
  3. Light bulb svg loader CSS Codes

How do I make an light bulb svg loader?

Simple svg loader of a light bulb using css animations.. What is a light bulb svg loader? How do you make a light bulb svg loader? This script and codes were developed by Chris Maki on 12 August 2022, Friday.

Light bulb svg loader Previews
IQ Test

Light bulb svg loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>light bulb svg loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg version="1.1" id="hei-loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-16 5.5 115.3 141.5" style="enable-background:new -16 5.5 115.3 141.5;" xml:space="preserve"> <g id="bulb_1_"> <path id="bulb-body-fill" class="st0" d="M79.7,67.8c0-18.4-16.9-33.2-37.7-33.2S4.3,49.4,4.3,67.8c0,7.3,2.7,14,7.1,19.4	c0.5,0.7,15.5,21.9,16.7,30.8c1.3,9.1,1.3,11.5,1.3,11.5h25.2c0,0,0-2.4,1.3-11.5c1.3-8.9,16.2-30,16.7-30.8	C77.1,81.8,79.7,75.1,79.7,67.8" /> <path id="bulb-body" class="st1" d="M79.4,67.8c0-18.4-16.9-33.2-37.7-33.2S4,49.4,4,67.8c0,7.3,2.7,14,7.1,19.4	c0.5,0.7,15.5,21.9,16.7,30.8c1.3,9.1,1.3,11.5,1.3,11.5h25.2c0,0,0-2.4,1.3-11.5c1.3-8.9,16.2-30,16.7-30.8	C76.8,81.8,79.4,75.1,79.4,67.8" /> <g> <line id="one" class="st2" x1="-15.3" y1="36.8" x2="-4.8" y2="47.4" /> <line id="two" class="st2" x1="-3.4" y1="16.6" x2="8.1" y2="32.7" /> <line id="three" class="st2" x1="21" y1="13.2" x2="24.5" y2="26.8" /> <line id="four" class="st2" x1="41.4" y1="5.5" x2="42.3" y2="24.9" /> <line id="five" class="st2" x1="61.9" y1="14.2" x2="57.8" y2="27.9" /> <line id="six" class="st2" x1="88.2" y1="19.4" x2="74.5" y2="34" /> <line id="seven" class="st2" x1="98.7" y1="40" x2="86.2" y2="48.8" /> </g> <line id="middle-screw" class="st1" x1="25.9" y1="138.5" x2="58" y2="138.5" /> <line id="bottom-screw" class="st1" x1="25.9" y1="146" x2="58" y2="146" /> </g> </svg>
</div>
</body>
</html>

Light bulb svg loader - Script Codes CSS Codes

body { background-color: rgba(156, 210, 210, .8);
}
svg { width: 100%;
}
.container { width: 200px; margin: 3em auto;
}
.st0 { fill: #FFFFFF;
}
.st1 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-miterlimit: 10;
}
.st2 { fill: none; opacity: .5; stroke: #FFFFFF; stroke-width: 2; stroke-miterlimit: 10;
}
#one { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .1s infinite; animation: line-glow 1s .1s infinite;
}
#two { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .2s infinite; animation: line-glow 1s .2s infinite;
}
#three { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .3s infinite; animation: line-glow 1s .3s infinite;
}
#four { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .4s infinite; animation: line-glow 1s .4s infinite;
}
#five { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .5s infinite; animation: line-glow 1s .5s infinite;
}
#six { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .6s infinite; animation: line-glow 1s .6s infinite;
}
#seven { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: line-glow 1s .7s infinite; animation: line-glow 1s .7s infinite;
}
#bulb-body-fill { -webkit-animation: bulb-on 1s ease infinite; animation: bulb-on 1s ease infinite;
}
@-webkit-keyframes line-glow { 10% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; }
}
@keyframes line-glow { 10% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; }
}
@-webkit-keyframes bulb-on { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes bulb-on { 0% { opacity: 0; } 100% { opacity: 1; }
}
Light bulb svg loader - Script Codes
Light bulb svg loader - Script Codes
Home Page Home
Developer Chris Maki
Username chrisMaki
Uploaded August 12, 2022
Rating 4
Size 2,344 Kb
Views 80,960
Do you need developer help for Light bulb svg loader?

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!

Chris Maki (chrisMaki) Script Codes
Name
Mutli-step form using GSAP
A Pen by chris maki
JQuery style fade in with regular JavaScript
Css expanding search
Show dialogue with blur animation
Parallax Type Thing
Simple Responsive Modal
Messing with GSAP
Overlay using mix-blend-mode
Objects move into place when scrolled into view
Create amazing SEO content 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!