Spinning Coin
A pure CSS spinning coin loader that uses perspective rotateY to simulate a coin tumbling and spinning to a stop — and then looping again. No JavaScript required.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnercoinflip3dperspectiveloader
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A CSS animation that looks like a coin spinning and wobbling on a flat surface.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes spinning-coin {
0% { transform: perspective(160px) rotateY(0deg); }
10% { transform: perspective(160px) rotateY(-65deg); }
90%, 100%{ transform: perspective(160px) rotateY(2880deg); }
}
.spinning-coin:before {
animation: spinning-coin 3s infinite;
border-radius: 100%;
background-color: #facc15;
transform-origin: center;
content: '';
display: block;
height: 40px;
width: 40px;
}HTML
html
<div class="spinning-coin"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes spinning-coin {
0% { transform: perspective(160px) rotateY(0deg); }
10% { transform: perspective(160px) rotateY(-65deg); }
90%, 100%{ transform: perspective(160px) rotateY(2880deg); }
}
.spinning-coin:before {
animation: spinning-coin 3s infinite;
border-radius: 100%;
background-color: #facc15;
transform-origin: center;
content: '';
display: block;
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<div class="spinning-coin"></div>
</body>
</html>