Box-shadow loader

Developer
Brandon Kennedy
Size
2,834 Kb
Views
24,288
  1. Box-shadow loader Previews
  2. Box-shadow loader HTML Codes
  3. Box-shadow loader CSS Codes

How do I make an box-shadow loader?

I spent a long time "remembering" how i had made another loader with box shadows http://codepen.io/brandonkennedy/pen/LEgjVE. What is a box-shadow loader? How do you make a box-shadow loader? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

Box-shadow loader Previews
IQ Test

Box-shadow loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>box-shadow loader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="c-loader"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Box-shadow loader - Script Codes CSS Codes

body { min-height: 100vh; padding: 2rem;
}
.c-loader, .c-loader:before, .c-loader:after { -webkit-animation: load 6s linear 1s infinite; animation: load 6s linear 1s infinite; border-radius: 50%; content: ''; height: 2em; left: calc(50% - 2em); position: absolute; top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2em; z-index: 1;
}
.c-loader:before { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; left: 1em; top: 200%;
}
.c-loader:after { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; left: 1em; top: -200%;
}
@-webkit-keyframes load { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; box-shadow: -2em -20em 0 0em rgba(255, 99, 71, 0), 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 6% { box-shadow: -2em -20em 0 0em rgba(255, 99, 71, 0), 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 9% { box-shadow: -2em 2em 0 0em tomato, 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 12% { box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em -20em 0 0em rgba(255, 99, 71, 0); } 15% { box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 51% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 54% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 57% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 2em 0 0em tomato; } 60% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 20em 0 0em rgba(255, 99, 71, 0); } 100% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 20em 0 0em rgba(255, 99, 71, 0); }
}
@keyframes load { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; box-shadow: -2em -20em 0 0em rgba(255, 99, 71, 0), 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 6% { box-shadow: -2em -20em 0 0em rgba(255, 99, 71, 0), 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 9% { box-shadow: -2em 2em 0 0em tomato, 2em -20em 0 0em rgba(255, 99, 71, 0), 6em -20em 0 0em rgba(255, 99, 71, 0); } 12% { box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em -20em 0 0em rgba(255, 99, 71, 0); } 15% { box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 51% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; box-shadow: -2em 2em 0 0em tomato, 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 54% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 2em 0 0em tomato, 6em 2em 0 0em tomato; } 57% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 2em 0 0em tomato; } 60% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 20em 0 0em rgba(255, 99, 71, 0); } 100% { box-shadow: -2em 20em 0 0em rgba(255, 99, 71, 0), 2em 20em 0 0em rgba(255, 99, 71, 0), 6em 20em 0 0em rgba(255, 99, 71, 0); }
}
*, *:before, *:after { box-sizing: border-box;
}
*, *:focus, *:active, *:focus:active, *:before, *:before:focus, *:before:active, *:before:focus:active, *:after, *:after:focus, *:after:active, *:after:focus:active { outline: none;
}
Box-shadow loader - Script Codes
Box-shadow loader - Script Codes
Home Page Home
Developer Brandon Kennedy
Username brandonkennedy
Uploaded September 18, 2022
Rating 4
Size 2,834 Kb
Views 24,288
Do you need developer help for Box-shadow 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!

Brandon Kennedy (brandonkennedy) Script Codes
Name
And yet another box shadow loader
Slug loader
Space ship fun
More loading
Lazyload.js
Crooked section dividers
Button disabled and loading states
SCSS Tick Marks Function
3D 2D Box-Shadow Fish
Digital Static Search Box
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!