#progressbar {
    margin: 0;
    padding: 0;
 
    text-align: center;
     position: relative;
     margin-top: 10px;
 
     margin-bottom: 10px;
     overflow: hidden;
     color: lightgrey;
 }
 
 #progressbar .active,#progressbar .finish {
     color: #666;
 }
 
 #progressbar li {
     list-style-type: none;
     font-size: 12px;
     width: 25%;
     float: right;
     position: relative
 }
 
 #progressbar #account:before {
     font-family: FontAwesome;
     content: "\f023"
 }
 
 #progressbar #personal:before {
     font-family: FontAwesome;
     content: "\f007"
 }
 
 #progressbar #verify_email:before {
     font-family: FontAwesome;
     content: "\f003"
 }
 
 #progressbar #verify_mobile:before {
     font-family: FontAwesome;
     content: "\f10b"
 }
 
 #progressbar li:before {
     width: 50px;
     height: 50px;
     line-height: 45px;
     display: block;
     font-size: 25px;
     color: #ffffff;
     background: lightgray;
     border-radius: 50%;
     margin: 0 auto 10px auto;
     padding: 2px
 }
 
 #progressbar li:after {
     content: '';
     width: 100%;
     height: 2px;
     background: lightgray;
     position: absolute;
     left: 0;
     top: 25px;
     z-index: -1
 }
 
 #progressbar li.finish:before,
 #progressbar li.finish:after {
     background: skyblue;
 }
 
 #progressbar li.active:before,
 #progressbar li.active:after {
     background: skyblue;
     animation: blinkingText 2s infinite;
 }
 
 @keyframes blinkingText{
         0%		{ background: skyblue;}
         25%		{ background: lightgray;}
         50%		{ background: skyblue;}
         75%		{ background: lightgray;}
         100%	{ background: skyblue;}
     }