Loader 5

Developer
Todd Moy
Size
2,489 Kb
Views
14,168
  1. Loader 5 Previews
  2. Loader 5 HTML Codes
  3. Loader 5 CSS Codes

How do I make an loader 5?

What is a loader 5? How do you make a loader 5? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Loader 5 Previews
IQ Test

Loader 5 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader 5</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="logo"> <rect id="b-l" class="logo_square" x="0" y="20" width="10" height="10" style="fill:#1A82E2" /> <rect id="b-m" class="logo_square" x="10" y="20" width="10" height="10" style="fill:#99E1F4" /> <rect id="m-m" class="logo_square" x="10" y="10" width="10" height="10" style="fill:#009DD9" /> <rect id="t-m" class="logo_square" x="10" y="0" width="10" height="10" style="fill:#00B3E3" /> <rect id="t-r" class="logo_square" x="20" y="0" width="10" height="10" style="fill:#1A82E2" /> <rect id="m-l" class="logo_square" x="00" y="10" width="10" height="10" style="fill:#99E1F4" /> <rect id="m-r" class="logo_square" x="20" y="10" width="10" height="10" style="fill:#00B3E3" />
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body>
</html>

Loader 5 - Script Codes CSS Codes

html, body { height: 100%; min-height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#logo { display: block; width: 30px; height: 30px;
}
.logo_square { opacity: 0; -webkit-animation: zoomIn 2s ease-in-out infinite; animation: zoomIn 2s ease-in-out infinite; -webkit-transform-origin: center center; transform-origin: center center;
}
#b-l { -webkit-animation-delay: 0.0s; animation-delay: 0.0s;
}
#b-m,
#m-l { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
#m-m { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
#m-r { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
#t-m,
#m-r { -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
#t-r { -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
@-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; } 20%, 60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 80%, 100% { -webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; }
}
@keyframes zoomIn { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; } 20%, 60% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } 80%, 100% { -webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; }
}
Loader 5 - Script Codes
Loader 5 - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 4
Size 2,489 Kb
Views 14,168
Do you need developer help for Loader 5?

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!

Todd Moy (toddmoy) Script Codes
Name
SVG Animation Test
Annotation Test
Flexbox test
Hidden Menu Test
A Pen by Todd Moy
Modal Interaction Test
Chrome Store Copy
Loader 5
Logo Animation
Experiment
Create amazing art & images 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!