Minimalist Design - VexaX
Run Code
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>Minimalist Design</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; 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-color: #e0e0e0; border-radius: 20px; overflow: hidden; border: 1px solid #ddd; } .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: 50%; } } .progress-bar-1 .progress-bar-fill { background-color: #ff5722; animation: progress1 3s forwards; } @keyframes progress2 { from { width: 0%; } to { width: 65%; } } .progress-bar-2 .progress-bar-fill { background-color: #2196f3; animation: progress2 3s forwards; } @keyframes progress3 { from { width: 0%; } to { width: 80%; } } .progress-bar-3 .progress-bar-fill { background-color: #4caf50; animation: progress3 3s forwards; } @keyframes progress4 { from { width: 0%; } to { width: 70%; } } .progress-bar-4 .progress-bar-fill { background-color: #9c27b0; animation: progress4 3s forwards; } @keyframes progress5 { from { width: 0%; } to { width: 85%; } } .progress-bar-5 .progress-bar-fill { background-color: #f44336; animation: progress5 3s forwards; } @keyframes progress6 { from { width: 0%; } to { width: 90%; } } .progress-bar-6 .progress-bar-fill { background-color: #00bcd4; animation: progress6 3s forwards; } </style> </head> <body> <h1>Minimalist 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">50%</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">65%</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">70%</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">85%</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">90%</div> </div> </div> </body> </html>