CSS3 Animated loading icon

Developer
Ivan
Size
3,148 Kb
Views
20,240
  1. CSS3 Animated loading icon Previews
  2. CSS3 Animated loading icon HTML Codes
  3. CSS3 Animated loading icon CSS Codes

How do I make an css3 animated loading icon?

CSS3 Load icon. 55 lines, used only 5 colors. Used color: ForestGreen, RoyalBlue, Tomato, DarkMagenta, Gold.. What is a css3 animated loading icon? How do you make a css3 animated loading icon? This script and codes were developed by Ivan on 07 September 2022, Wednesday.

CSS3 Animated loading icon Previews
IQ Test

CSS3 Animated loading icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Animated loading icon</title> <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! */ html {background-color: GhostWhite;}
#anim { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -45px; margin-left: -45px; border-radius: 40%; overflow: hidden; animation: bgcolor linear 8s infinite; font-size:0; /* (FIX) убираем горизонтальные отступы */ line-height:0; /* (FIX) и вертикальные */ letter-spacing: -1px; /* (FIX) переубеждаем webkit'ы */ display: -moz-inline-stack!important;/* (FIX) */
}
@keyframes bgcolor { 0% {background: ForestGreen;} 20% {background: RoyalBlue;} 40% {background: Tomato;} 60% {background: DarkMagenta;} 80% {background: Gold;} 100% {background: ForestGreen;}
}
#anim div { width: 25px; height: 25px; display: inline-block; animation-name: boxfirst; animation-duration: .55s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.box1 {animation-delay: -.55s;}
.box2 {animation-delay: -.50s;}
.box3 {animation-delay: -.45s;}
.box4 {animation-delay: -.40s;}
.box8 {animation-delay: -.35s;}
.box12 {animation-delay: -.30s;}
.box16 {animation-delay: -.25s;}
.box15 {animation-delay: -.20s;}
.box14 {animation-delay: -.15s;}
.box13 {animation-delay: -.10s;}
.box9 {animation-delay: -.5s;}
.box5 {animation-delay: 0s;}
@keyframes boxfirst { 0% {background-color: rgba(0,0,0,.2)} 50% {background-color: rgba(255,255,255,.2)} 100% {background-color: rgba(0,0,0,.2)}
}
.box6 {animation-delay: 0s; opacity: .5;}
.box7 {animation-delay: .18s; opacity: .5;}
.box10 {animation-delay: .36s; opacity: .5;}
.box11 {animation-delay: .55s; opacity: .5;}
/* other */
#loader { font-size: 24px; text-align: center; margin-top: 30px;
}
#colors { position: relative; top: 20px; text-align: center;
}
#by { position: absolute; bottom: 10%; left: 50%; margin-left: -50px; color: #ccc;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="loader">CSS3 Loader (55 lines, used 5 colors)</div>
<div id="anim"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> <div class="box10"></div> <div class="box11"></div> <div class="box12"></div> <div class="box13"></div> <div class="box14"></div> <div class="box15"></div> <div class="box16"></div>
</div>
<div id="colors">Used color: ForestGreen, RoyalBlue, Tomato, DarkMagenta, Gold. <a href="http://www.147colors.com/grid/">More colors</a></div>
<div id="by">by Zheludkov Ivan</div>
</body>
</html>

CSS3 Animated loading icon - Script Codes CSS Codes

html {background-color: GhostWhite;}
#anim { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -45px; margin-left: -45px; border-radius: 40%; overflow: hidden; animation: bgcolor linear 8s infinite; font-size:0; /* (FIX) убираем горизонтальные отступы */ line-height:0; /* (FIX) и вертикальные */ letter-spacing: -1px; /* (FIX) переубеждаем webkit'ы */ display: -moz-inline-stack!important;/* (FIX) */
}
@keyframes bgcolor { 0% {background: ForestGreen;} 20% {background: RoyalBlue;} 40% {background: Tomato;} 60% {background: DarkMagenta;} 80% {background: Gold;} 100% {background: ForestGreen;}
}
#anim div { width: 25px; height: 25px; display: inline-block; animation-name: boxfirst; animation-duration: .55s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.box1 {animation-delay: -.55s;}
.box2 {animation-delay: -.50s;}
.box3 {animation-delay: -.45s;}
.box4 {animation-delay: -.40s;}
.box8 {animation-delay: -.35s;}
.box12 {animation-delay: -.30s;}
.box16 {animation-delay: -.25s;}
.box15 {animation-delay: -.20s;}
.box14 {animation-delay: -.15s;}
.box13 {animation-delay: -.10s;}
.box9 {animation-delay: -.5s;}
.box5 {animation-delay: 0s;}
@keyframes boxfirst { 0% {background-color: rgba(0,0,0,.2)} 50% {background-color: rgba(255,255,255,.2)} 100% {background-color: rgba(0,0,0,.2)}
}
.box6 {animation-delay: 0s; opacity: .5;}
.box7 {animation-delay: .18s; opacity: .5;}
.box10 {animation-delay: .36s; opacity: .5;}
.box11 {animation-delay: .55s; opacity: .5;}
/* other */
#loader { font-size: 24px; text-align: center; margin-top: 30px;
}
#colors { position: relative; top: 20px; text-align: center;
}
#by { position: absolute; bottom: 10%; left: 50%; margin-left: -50px; color: #ccc;
}
CSS3 Animated loading icon - Script Codes
CSS3 Animated loading icon - Script Codes
Home Page Home
Developer Ivan
Username Vany
Uploaded September 07, 2022
Rating 4
Size 3,148 Kb
Views 20,240
Do you need developer help for CSS3 Animated loading icon?

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!

Ivan (Vany) Script Codes
Name
A Pen by Ivan
The test for determining visual px
Card
HTML Semantics
Simple loader
Footer scroll effect
Snow
Simple js slider
Create amazing love letters 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!