LOADING
How do I make an loading?
Animating the box-shadow and shifting the color to match the background. The color property handles the text color along with the box-shadow color.. What is a loading? How do you make a loading? This script and codes were developed by Jordan on 03 December 2022, Saturday.
LOADING - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LOADING</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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{ margin:0; height:100%;
}
body{ margin:0; height:100%; background:darkorange;
}
.loader{ position:relative; top:40%; margin:0 auto; width:6em; height:6em; border-radius:3em; text-align:center; line-height:6em; font-family:sans-serif; font-weight:100; color:brown; box-shadow:inset 0 -5em 3em, inset 0 0 2em, inset 0 0 1em; animation:load 4s infinite alternate cubic-bezier(1,.37,.4,1);
}
@keyframes load{ 100%{ box-shadow:inset 0 5em 3em, 0 0 3em; color:darkorange; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loader">LOADING</div>
</body>
</html>
LOADING - Script Codes CSS Codes
html{ margin:0; height:100%;
}
body{ margin:0; height:100%; background:darkorange;
}
.loader{ position:relative; top:40%; margin:0 auto; width:6em; height:6em; border-radius:3em; text-align:center; line-height:6em; font-family:sans-serif; font-weight:100; color:brown; box-shadow:inset 0 -5em 3em, inset 0 0 2em, inset 0 0 1em; animation:load 4s infinite alternate cubic-bezier(1,.37,.4,1);
}
@keyframes load{ 100%{ box-shadow:inset 0 5em 3em, 0 0 3em; color:darkorange; }
}
| Developer | Jordan |
| Username | Jordan |
| Uploaded | December 03, 2022 |
| Rating | 3 |
| Size | 2,095 Kb |
| Views | 10,120 |
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 |
| Warp V2 | 9,549 Kb |
| Div Screen Saver | 8,930 Kb |
| Wut | 7,627 Kb |
| Fallout Shelter | 4,320 Kb |
| Webkit Filter Neon Buttons | 2,651 Kb |
| Liquid | 6,785 Kb |
| Visual Experiment | 2,137 Kb |
| A Pen by Jordan | 2,284 Kb |
| CSS Isometric | 2,314 Kb |
| V.35 The Monolith Update - Hero Release Notes | 12,045 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 |
| Get third wednesday | Wojtek1150 | 2,691 Kb |
| A Pen by boilzzz | Boilzzz | 2,761 Kb |
| TestTube CSS | EZPK | 2,710 Kb |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| Out of the blue | Giaco | 2,537 Kb |
| Drag n Drop | Martin42 | 2,594 Kb |
| JavaScript Animation | Rcmeisty | 4,581 Kb |
| A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| Testing Code Pen | Jduprey | 1,468 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!