.skill-bars{padding:25px 30px;width:100%;background:#fff;box-shadow:5px 5px 20px rgba(0,0,0,.2);border-radius:10px}.skill-bars .bar{margin:20px 0}.skill-bars .bar:first-child{margin-top:0}.skill-bars .bar .info{margin-bottom:5px}.skill-bars .bar .info span{font-weight:500;font-size:17px;opacity:0;animation:showText .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,.05),0 1px rgba(255,255,255,.8);animation:animate 1s cubic-bezier(1,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,.5,1) forwards}.bar .progress-line-0_25 span{height:100%;position:absolute;border-radius:10px;transform:scaleX(0);transform-origin:left;background:#b21f2d;animation:animate 1s 1s cubic-bezier(1,0,.5,1) forwards}.bar .progress-line-25_50 span{height:100%;position:absolute;border-radius:10px;transform:scaleX(0);transform-origin:left;background:orange;animation:animate 1s 1s cubic-bezier(1,0,.5,1) forwards}.bar .progress-line-50_75 span{height:100%;position:absolute;border-radius:10px;transform:scaleX(0);transform-origin:left;background:#6665ee;animation:animate 1s 1s cubic-bezier(1,0,.5,1) forwards}.bar .progress-line-75_100 span{height:100%;position:absolute;border-radius:10px;transform:scaleX(0);transform-origin:left;background:#1e7e34;animation:animate 1s 1s cubic-bezier(1,0,.5,1) forwards}.progress-line span::before{position:absolute;content:"";top:-10px;right:0;height:0;width:0;border:7px solid transparent;border-bottom-width:0;border-right-width:0;border-top-color:#000;opacity:0;animation:showText2 .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 .5s 1.5s linear forwards}#container{margin:20px;width:200px;height:100px}ul.timeline{list-style-type:none;position:relative}ul.timeline:before{content:' ';background:#d4d9df;display:inline-block;position:absolute;left:29px;width:2px;height:100%;z-index:400}ul.timeline>li{margin:20px 0;padding-left:20px}ul.timeline>li:before{content:' ';background:#fff;display:inline-block;position:absolute;border-radius:50%;border:3px solid #22c0e8;left:20px;width:20px;height:20px;z-index:400}