LinkedIn Loader Animation
How do I make an linkedin loader animation?
Quick & dirty recreation of the linkedin loader animation using greensock. What is a linkedin loader animation? How do you make a linkedin loader animation? This script and codes were developed by Kasper on 30 January 2023, Monday.
LinkedIn Loader Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LinkedIn Loader Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" class="li" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
<g id="Logo"> <path fill="#0274B3" d="M1192.8,613.6H727.2c-8.3,0-15-6.7-15-15V133c0-8.3,6.7-15,15-15h465.6c8.3,0,15,6.7,15,15v465.6 C1207.8,606.9,1201.1,613.6,1192.8,613.6z"/> <g> <g> <path fill="#FFFFFF" d="M796.7,199.3c8.5-8.3,18.6-12.4,30.6-12.4c11.9,0,22.1,4.1,30.6,12.4c8.5,8.3,12.7,18.3,12.7,30 s-4.2,21.7-12.7,30c-8.5,8.3-18.6,12.4-30.6,12.4c-11.9,0-22.1-4.1-30.6-12.4c-8.5-8.3-12.7-18.3-12.7-30 S788.3,207.6,796.7,199.3z M790,303.9h74.6v236.9H790V303.9z"/> <path fill="#FFFFFF" d="M908.3,303.9h71.6V336h1c2.3-4.5,5.6-9.1,9.9-13.6c4.3-4.5,9.4-8.6,15.4-12.2c6-3.6,12.8-6.5,20.4-8.8 c7.6-2.3,15.9-3.4,24.9-3.4c18.9,0,34.1,2.8,45.7,8.5c11.6,5.7,20.6,13.6,27.1,23.6c6.5,10.1,10.9,21.9,13.2,35.6 c2.3,13.6,3.5,28.4,3.5,44.4v130.6h-74.6v-116c0-6.8-0.2-13.9-0.7-21.2s-2-14.1-4.5-20.2c-2.5-6.2-6.3-11.2-11.4-15.1 c-5.1-3.9-12.5-5.8-22.1-5.8c-9.6,0-17.4,1.7-23.4,5.1c-6,3.4-10.5,8-13.7,13.6c-3.2,5.7-5.2,12.1-6.2,19.3 c-1,7.2-1.5,14.6-1.5,22.4v118h-74.6V303.9z"/> </g> </g>
</g>
<line id="LoadBar" fill="none" stroke="#CFCFCF" stroke-width="24" stroke-miterlimit="10" x1="280" y1="949.5" x2="1640" y2="949.5"/>
<line id="LoadFill" fill="none" stroke="#0274B3" stroke-width="24" stroke-miterlimit="10" x1="280" y1="949.5" x2="1640" y2="949.5"/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
LinkedIn Loader Animation - Script Codes CSS Codes
body { text-align:center;
}
svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px;
}
LinkedIn Loader Animation - Script Codes JS Codes
var BarFill = $('#LoadFill'), Bar = $('#LoadBar') logo = $('#Logo') Tl = new TimelineMax({repeat:-1,repeatDelay:1});
Tl.fromTo(BarFill,0.3,{drawSVG:'0%'},{drawSVG:'50%',ease:Linear.easeNone})
.fromTo(BarFill,0.3,{drawSVG:'10% 60%'},{drawSVG:'60% 100%',ease:Linear.easeNone})
.to(BarFill,0.3,{drawSVG:'77% 100%',ease:Power0.easeInOut})
.to(BarFill,0.3,{drawSVG:'0% 60%',ease:Power0.easeOut},'fadeOutLogo')
.to(BarFill,0.3,{drawSVG:'0% 30%',ease:Power0.easeOut})
.to(BarFill,0.25,{drawSVG:'60% 60%'},'fadeoutLine')
.to(logo,0.7,{autoAlpha:0,y:35,ease:Power0.easeOut},'fadeOutLogo')
.to(Bar,0.25,{drawSVG:'50% 50%',autoAlpha:0},'fadeoutLine')
Tl.timeScale(0.9)
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,691 Kb |
Views | 6,072 |
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!
Name | Size |
Growing Heart Animation | 2,109 Kb |
Share Page Animation | 2,363 Kb |
Slack Logo test | 3,217 Kb |
Bootstrap Template | 1,292 Kb |
Login Form | 2,321 Kb |
Animated Logo | 3,779 Kb |
Love 2 rainbow | 3,360 Kb |
Social Icon Fun | 2,037 Kb |
A Pen by kasper | 5,021 Kb |
Slack Loader Animation | 2,991 Kb |
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!
Name | Username | Size |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!