"Animated skills bar"
Bootstrap 3.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="skill-bars"> <div class="bar"> <div class="info"> <span>HTML</span> </div> <div class="progress-line html"> <span></span> </div> </div> <div class="bar"> <div class="info"> <span>CSS</span> </div> <div class="progress-line css"> <span></span> </div> </div> <div class="bar"> <div class="info"> <span>jQuery</span> </div> <div class="progress-line jquery"> <span></span> </div> </div> <div class="bar"> <div class="info"> <span>Python</span> </div> <div class="progress-line python"> <span></span> </div> </div> <div class="bar"> <div class="info"> <span>MySQL</span> </div> <div class="progress-line mysql"> <span></span> </div> </div> </div> </body>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ display: grid; height: 100%; place-items: center; background: #6665ee; } ::selection{ color: #fff; background: #6665ee; } .skill-bars{ padding: 25px 30px; width: 600px; background: #fff; box-shadow: 5px 5px 20px rgba(0,0,0,0.2); border-radius: 10px; } .skill-bars .bar{ margin: 20px 0; } .skill-bars .bar:first-child{ margin-top: 0px; } .skill-bars .bar .info{ margin-bottom: 5px; } .skill-bars .bar .info span{ font-weight: 500; font-size: 17px; opacity: 0; animation: showText 0.5s 1s linear forwards; } @keyframes showText { 100%{ opacity: 1; } } .skill-bars .bar .progress-line{ height: 10px; width: 100%; background: #f0f0f0; position: relative; transform: scaleX(0); transform-origin: left; border-radius: 10px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 1px rgba(255,255,255,0.8); animation: animate 1s cubic-bezier(1,0,0.5,1) forwards; } @keyframes animate { 100%{ transform: scaleX(1); } } .bar .progress-line span{ height: 100%; position: absolute; border-radius: 10px; transform: scaleX(0); transform-origin: left; background: #6665ee; animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards; } .bar .progress-line.html span{ width: 90%; } .bar .progress-line.css span{ width: 60%; } .bar .progress-line.jquery span{ width: 85%; } .bar .progress-line.python span{ width: 50%; } .bar .progress-line.mysql span{ width: 75%; } .progress-line span::before{ position: absolute; content: ""; top: -10px; right: 0; height: 0; width: 0; border: 7px solid transparent; border-bottom-width: 0px; border-right-width: 0px; border-top-color: #000; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; } .progress-line span::after{ position: absolute; top: -28px; right: 0; font-weight: 500; background: #000; color: #fff; padding: 1px 8px; font-size: 12px; border-radius: 3px; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; } @keyframes showText2 { 100%{ opacity: 1; } } .progress-line.html span::after{ content: "90%"; } .progress-line.css span::after{ content: "60%"; } .progress-line.jquery span::after{ content: "85%"; } .progress-line.python span::after{ content: "50%"; } .progress-line.mysql span::after{ content: "75%"; }

Questions / Comments: