Motion blur loader

Developer
Alex Bergin
Size
2,505 Kb
Views
68,816
  1. Motion blur loader Previews
  2. Motion blur loader HTML Codes
  3. Motion blur loader CSS Codes

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 Previews
IQ Test

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;
}
Motion blur loader - Script Codes
Motion blur loader - Script Codes
Home Page Home
Developer Alex Bergin
Username abergin
Uploaded June 13, 2022
Rating 4
Size 2,505 Kb
Views 68,816
Do you need developer help for Motion blur 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!

Alex Bergin (abergin) Script Codes
Name
E - Espresso
G - Golf
Using Pseudo Elements for Input Styling
Baymax
Header Layout
Sibling Selector Style Change on Hover
A Pen by Alex Bergin
Fancy Text Inputs
Activate on Scroll
B - Bicycle
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!