Progress Bar with html and css ( Source code )

Progress Bar with html and css ( Source code )

HTML

<div class="wrapper"> <img src="1.jpeg" alt=""> <div class="skills-area"> <h2> Adam Smith</h2> <ul class="single-skill"> <li><span class="line personality"></span><b>Personality  (90%)</b></li> <li><span class="line creativity"></span><b>Creativity  (85%)</b></li> <li><span class="line stamina"></span><b>Stamina  (90%)</b></li> </ul> </div> </div>


CSS


body { height: 100vh; color: #fff; font-family: poppins; background: #262626; } .wrapper { width: 400px; margin: 0 auto; position: relative; font-size: 14px; line-height: 28px; padding: 30px 0 30px; } .wrapper h2 { font-size: 30px; text-transform: uppercase; margin-bottom: 15%; text-align: left; } .wrapper img { width: 100%; } .skills-area { width: 100%; } .single-skill { list-style: none; margin: 0; padding: 0; } .single-skill li { margin-bottom: 50px; height: 15px; } .single-skill li b { position: relative; top: -30px; font-size: 20px; } .line { height: 5px; margin: 2px 0; background: #fafafa; position: absolute; } .personality { width: 90%; -moz-animation: Personality 2s ease-out; -webkit-animation: Personality 2s ease-out; } .creativity { width: 85%; -moz-animation: Creativity 2s ease-out; -webkit-animation: Creativity 2s ease-out; } .stamina { width: 90%; -moz-animation: stamina 2s ease-out; -webkit-animation: stamina 2s ease-out; } @-moz-keyframes Personality { 0% { width: 0; } 100% { width: 90%; } } @-moz-keyframes Creativity { 0% { width: 0; } 100% { width: 85%; } } @-moz-keyframes stamina { 0% { width: 0; } 100% { width: 90%; } }