37 lines
1.6 KiB
CSS
37 lines
1.6 KiB
CSS
/*
|
|
Template: Webster - Responsive Multi-purpose HTML5 Template
|
|
Author: potenzaglobalsolutions.com
|
|
Design and Developed by: potenzaglobalsolutions.com
|
|
|
|
NOTE: This file contains Progress Bar (Skill) CSS.
|
|
*/
|
|
|
|
/*************************
|
|
skills
|
|
*************************/
|
|
.skill-bar{width:100%; height:7px; margin:40px 0 20px 0; background-color:#eceff8; border-radius: 4px;}
|
|
.skill-bar:not(:first-child){margin-top:64px;}
|
|
.progress-bar{height:100%; border-radius: 4px; padding:0px; background:#5E9ECA; box-shadow:none; transition: width .9s ease; -webkit-transition: width .9s ease; -o-transition: width .9s ease; -ms-transition: width .9s ease; -moz-transition: width .9s ease; }
|
|
.progress-title{color:#353535; font-size:18px; font-weight:600; position:absolute; text-align:left; margin-left:0; margin-top:-28px;}
|
|
.progress-title > i{margin-right:8px;}
|
|
.progress-bar .progress-number,
|
|
.progress-bar .progress-type{color:#353535; float:right; margin-top:-18px; position:relative; top:-10px; font-size:15px; font-weight: 600;}
|
|
|
|
/* Dark Background */
|
|
.text-white .skill-bar{background:rgba(255,255,255,0.25);}
|
|
.text-white .progress-title{color:#ffffff;}
|
|
.text-white .progress-bar .progress-number,
|
|
.text-white .progress-bar .progress-type{color:#ffffff;}
|
|
.theme-bg .progress-bar, .services-text-box-blue .progress-bar{background: #ffffff}
|
|
|
|
/* big Skills */
|
|
.skill-bar.skill-big { height:12px; }
|
|
|
|
/* Medium Skills */
|
|
.skill-bar.skill-medium { height:8px; }
|
|
|
|
/* Small Skills */
|
|
.skill-bar.skill-small { height:3px; }
|
|
|
|
/* Dark Skills */
|
|
.skill-bar.skill-dark .progress-bar { background:#353535; } |