2

текст, выделенный жирным шрифтомвведите сюда описание изображенияПодскажите как сверстать такой блок без анимации на CSS?

1
  • чаще всего нужно бывает динамически изменять бар. для "вашего же блага" рекомендую использовать какую нибудь библиотеку к примеру kimmobrunfeldt.github.io/progressbar.js Commented 25 нояб. 2020 в 13:44

2 ответа 2

3

Можно еще проще.

* { box-sizing: border-box; }
li { list-style-type: none; }
p { margin: .5rem 0 2.5rem .5rem;
    letter-spacing: .2rem;
    text-transform: uppercase; }

progress, output { display: block; }
progress { border-radius: 0; width: 100%; height: 5px; }
progress::-webkit-progress-bar { background-color: #aaa; }
progress::-moz-progress-bar { background-color: #aaa; }
progress::-webkit-progress-value { background-color: #000; }
progress::-moz-progress-value { background-color: #000; }

li output { position: absolute; transform: translate(-4rem, .5rem); }
li:nth-child(1) output{ margin-left: 90%; }
li:nth-child(2) output{ margin-left: 80%; }
li:nth-child(3) output{ margin-left: 85%; }
<ul>
  <li>
    <progress value="0.90"></progress>
    <output>90%</output>
    <p>Branding</p>
  </li>
  <li>
    <progress value=".80"></progress>
    <output>80%</output>
    <p>Design</p>
  </li>
  <li>
    <progress value=".85"></progress>
    <output>85%</output>
    <p>Development</p>
  </li>
</ul>

2
  • цифорок нету, как в примере Commented 25 нояб. 2020 в 12:13
  • @МихаилКамахин уже есть
    – DiD
    Commented 25 нояб. 2020 в 12:19
1

примерно так:

.progress {
    position:     relative;
    
    border-top:   3px solid black;
    
    width:        300px;
    
    padding-top:  10px;
    
    text-transform: uppercase;
    letter-spacing: .2rem;
}

.progress:after {
    position:     absolute;
    top:          -3px;
    right:        0px;
    
    border-top:   3px solid #c0c0c0;

    width:        calc(100% - 75%);
    
    padding-top:  10px;
    margin-left: -24px;

    content:      "75%";

    text-indent:  -25%;
    
    text-transform: uppercase;
    letter-spacing: .2rem;
    
    color:        #c0c0c0;
}
<div class = 'progress'>НАЗВАНИЕ</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.