Modern 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>Modern Design</title> <style> body { font-family: 'Arial', sans-serif; background-color: #e0e0e0; margin: 0; padding: 20px; } .progress-bar-container { margin: 20px 0; } .progress-bar-title { font-size: 18px; margin-bottom: 5px; font-weight: bold; } .progress-bar { position: relative; width: 100%; height: 40px; background-color: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .progress-bar-fill { height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; 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-color: #ff4081; animation: progress1 3s forwards; } @keyframes progress2 { from { width: 0%; } to { width: 60%; } } .progress-bar-2 .progress-bar-fill { background-color: #03a9f4; animation: progress2 3s forwards; } @keyframes progress3 { from { width: 0%; } to { width: 85%; } } .progress-bar-3 .progress-bar-fill { background-color: #4caf50; animation: progress3 3s forwards; } @keyframes progress4 { from { width: 0%; } to { width: 75%; } } .progress-bar-4 .progress-bar-fill { background-color: #ffc107; animation: progress4 3s forwards; } @keyframes progress5 { from { width: 0%; } to { width: 90%; } } .progress-bar-5 .progress-bar-fill { background-color: #673ab7; animation: progress5 3s forwards; } @keyframes progress6 { from { width: 0%; } to { width: 80%; } } .progress-bar-6 .progress-bar-fill { background-color: #ff5722; animation: progress6 3s forwards; } </style> </head> <body> <h1>Modern 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">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">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">75%</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">90%</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> </body> </html>