Motion blur loader
How do I make an motion blur loader?
Spin spin spin spin spin spin spin spin spin spin spin spin spin . What is a motion blur loader? How do you make a motion blur loader? This script and codes were developed by Alex Bergin on 13 June 2022, Monday.
Motion blur loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>motion blur loader</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> <div class="loader"></div>
</body>
</html>
Motion blur loader - Script Codes CSS Codes
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-2160deg); transform: rotate(-2160deg); }
}
@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-2160deg); transform: rotate(-2160deg); }
}
@-webkit-keyframes normal-opacity { 0% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes normal-opacity { 0% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 0; } 100% { opacity: 1; }
}
html, body { position: absolute; background-color: #1d2528; top: 0; left: 0; width: 100%; height: 100%;
}
.loader { -webkit-animation: 1.25s spin cubic-bezier(0.46, -0.4, 0.2, 1.51) infinite both; animation: 1.25s spin cubic-bezier(0.46, -0.4, 0.2, 1.51) infinite both; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; border-radius: 50%; overflow: hidden;
}
.loader:before, .loader:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; box-sizing: border-box; border: 20px solid black; border-top-color: #fa4248; border-left-color: #5ddbba; border-bottom-color: #ede670; border-right-color: #64c3f2;
}
.loader:before { -webkit-filter: blur(2px); filter: blur(2px);
}
.loader:after { -webkit-animation: 1.25s normal-opacity cubic-bezier(0.46, -0.4, 0.2, 1.51) infinite both; animation: 1.25s normal-opacity cubic-bezier(0.46, -0.4, 0.2, 1.51) infinite both;
}
Developer | Alex Bergin |
Username | abergin |
Uploaded | June 13, 2022 |
Rating | 4 |
Size | 2,505 Kb |
Views | 68,816 |
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 |
E - Espresso | 4,229 Kb |
SASS Placeholder Style Mixin | 2,130 Kb |
Activate on Scroll | 3,358 Kb |
A Pen by Alex Bergin | 3,347 Kb |
Spinning Liquid In Box Loader Doodle | 2,992 Kb |
Header Layout | 3,123 Kb |
Using Pseudo Elements for Input Styling | 3,999 Kb |
Singing Text To Speech | 9,647 Kb |
Background animation | 5,314 Kb |
P - Polaroid | 3,532 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 |
Slide out Menu | Rbiggs | 4,936 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Out of the blue | Giaco | 2,537 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Mario | Takaneichinose | 3,902 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 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!