Glassmorphism 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>Glassmorphism 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: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; overflow: hidden; } .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: 70%; } } .progress-bar-1 .progress-bar-fill { background: linear-gradient(45deg, #00bcd4, #00796b); animation: progress1 3s forwards; } @keyframes progress2 { from { width: 0%; } to { width: 55%; } } .progress-bar-2 .progress-bar-fill { background: linear-gradient(45deg, #ff4081, #f50057); animation: progress2 3s forwards; } @keyframes progress3 { from { width: 0%; } to { width: 85%; } } .progress-bar-3 .progress-bar-fill { background: linear-gradient(45deg, #8bc34a, #cddc39); animation: progress3 3s forwards; } @keyframes progress4 { from { width: 0%; } to { width: 90%; } } .progress-bar-4 .progress-bar-fill { background: linear-gradient(45deg, #ff9800, #ff5722); animation: progress4 3s forwards; } @keyframes progress5 { from { width: 0%; } to { width: 65%; } } .progress-bar-5 .progress-bar-fill { background: linear-gradient(45deg, #9c27b0, #e040fb); animation: progress5 3s forwards; } @keyframes progress6 { from { width: 0%; } to { width: 80%; } } .progress-bar-6 .progress-bar-fill { background: linear-gradient(45deg, #00bcd4, #00796b); animation: progress6 3s forwards; } </style> </head> <body> <h1>Glassmorphism 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">70%</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">55%</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">85%</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">65%</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">80%</div> </div> </div> </div> </body> </html>