Loader by MiniJohan
#212121
1.body { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100px; 6 margin: 0; 7 background-color: #f0f0f0; 8} 9 10.coin { 11 position: relative; 12 width: 100px; 13 height: 100px; 14 background-color: #d4af37; /* Coin color */ 15 border-radius: 50%; 16 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Coin shadow */ 17 background-image: radial-gradient( 18 circle at 50% 120%, 19 rgba(255, 255, 255, 0.5) 0%, 20 rgba(255, 255, 255, 0) 80% 21 ); /* Coin texture */ 22 animation: flip 1s infinite; 23} 24 25.engraving { 26 position: absolute; 27 top: 50%; 28 left: 50%; 29 transform: translate(-50%, -50%); 30 font-size: 50px; 31 font-weight: bold; 32 color: rgba(0, 0, 0, 0.5); /* Engraving color */ 33 text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); /* Engraving shadow */ 34} 35 36@keyframes flip { 37 0% { 38 transform: rotateY(0deg); 39 } 40 50% { 41 transform: rotateY(180deg); 42 } 43 100% { 44 transform: rotateY(360deg); 45 } 46} 47
149 views
149 views
MIT License