Progress bar در CSS

CSS

توسط wwworker در 4 سال پیش
0 820 2 4 سال پیش
wwworkersaber2daniel
0

Progress bar ساده با CSS:

.progress-bar {
    width: 300px;
    height: 24px;
    padding: 4px;
    background-color: #191919;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
    -webkit-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
    -moz-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
    }
     
    /*Parte interna de la barra */
    .progress-bar:before {
    content: '';
    display: block;
    position: absolute;
    width: 200px;
    height: 24px;
    background: #999;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),0 1px 1px #000;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 1px 1px #000;
    }
     
    /* las barras inclinadas */
    .progress-bar:after {
    content: '|||||||||||||';
    display: block;
    position: absolute;
    width: 200px;
    height: 24px;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    font:bold 120px/80px sans-serif;
    letter-spacing: -6px;
    color: #000;
    opacity: 0.06;
    }
     
    /* el color de la barra */
    .azul:before {
    background: #099;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
    background: -moz-linear-gradient(top, #099, #006A6B);
    }
0

html هم میزاشتی :|

0

> html هم میزاشتی :|
سلام html با توجه به css معلومه!

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید