Neumorphism Design - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphism Design</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; } .progress-bar-container { margin: 20px 0; } .progress-bar-title { font-size: 18px; margin-bottom: 5px; } .progress-bar { position: relative; width: 100%; height: 40px; background: #e0e0e0; border-radius: 20px; overflow: hidden; box-shadow: inset 8px 8px 15px #c1c1c1, inset -8px -8px 15px #ffffff; } .progress-bar-fill { height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: #fff; font-size: 16px; transition: width 1s ease-in-out; } @keyframes progress1 { from { width: 0%; } to { width: 75%; } } .progress-bar-1 .progress-bar-fill { background-color: #4caf50; animation: progress1 3s forwards; } @keyframes progress2 { from { width: 0%; } to { width: 60%; } } .progress-bar-2 .progress-bar-fill { background: linear-gradient(45deg, #f093fb, #f5576c); animation: progress2 3s forwards; } @keyframes progress3 { from { width: 0%; } to { width: 80%; } } .progress-bar-3 .progress-bar-fill { background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #ffcc00 10px, #ffcc00 20px); animation: progress3 3s forwards; } @keyframes progress4 { from { width: 0%; } to { width: 90%; } } .progress-bar-4 .progress-bar-fill { background-color: #1e88e5; animation: progress4 3s forwards; } @keyframes progress5 { from { width: 0%; } to { width: 70%; } } .progress-bar-5 .progress-bar-fill { background-color: #ff5722; animation: progress5 3s forwards; box-shadow: 0 0 10px rgba(255, 87, 34, 0.5); } @keyframes progress6 { from { width: 0%; } to { width: 85%; } } .progress-bar-6 .progress-bar-fill { background-color: #9c27b0; animation: progress6 3s forwards; background: linear-gradient(to right, #9c27b0, #e040fb); } </style> </head> <body> <h1>Neumorphism Design</h1> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 1 🚀</div> <div class="progress-bar progress-bar-1"> <div class="progress-bar-fill">75%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 2 💻</div> <div class="progress-bar progress-bar-2"> <div class="progress-bar-fill">60%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 3 🎨</div> <div class="progress-bar progress-bar-3"> <div class="progress-bar-fill">80%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 4 🚀</div> <div class="progress-bar progress-bar-4"> <div class="progress-bar-fill">90%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 5 🔥</div> <div class="progress-bar progress-bar-5"> <div class="progress-bar-fill">70%</div> </div> </div> <div class="progress-bar-container"> <div class="progress-bar-title">Skill 6 🌈</div> <div class="progress-bar progress-bar-6"> <div class="progress-bar-fill">85%</div> </div> </div> </body> </html>