Блог

Главная - Вопросы по программированию - Индикаторы выполнения разделения начальной загрузки

Индикаторы выполнения разделения начальной загрузки

#html #css #twitter-bootstrap #breadcrumbs

#HTML #css #twitter-bootstrap #панировочные сухари

Вопрос:

Я ни за что в жизни не смогу придумать наилучший способ сделать это. Я пробовал использовать индикаторы выполнения, используя отдельные разделы, похоже, ничего не работает. Я нашел примеры в Интернете, пытающиеся сделать это, но безрезультатно.

Вот чего я пытаюсь достичь:

введите описание изображения здесь

Вот что у меня есть:

введите описание изображения здесь

Кажется, я двигаюсь в правильном направлении, но не могу в этом разобраться. Я бы хотел выполнить это строго с помощью CSS, если это возможно. Любая помощь приветствуется.

 #breadcrumbs-two{
  overflow: hidden;
  list-style: none;
  float: right;
  padding: 0;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}  
 <ul id="breadcrumbs-two">
												    <li><a href="">Lorem ipsum</a></li>
												    <li><a href="">Vivamus nisi eros</a></li>
												    <li><a href="">Nulla sed lorem risus</a></li>
												    <li><a href="" class="current">Current crumb</a></li>
												</ul>

Комментарии:

1. Покажите ваш код с попытками, пожалуйста.

2. @flppv Я добавил фрагмент к исходному сообщению. Это пример, который я смог извлечь из руководства. Хотя это в общем направлении, в котором я хотел бы пойти, это не то, что изображено в том, что я ищу. Я не ожидаю, что вы будете «воссоздавать» это, хотя какое-то направление было бы потрясающим. Я не смог установить интервал между различными параметрами в виде диагональной линии или радиуса границы :first-child:before, как показано на рисунке.

3. Вы хотите достичь этого с помощью prograss bar или breadcrumb?

4. @sharvan Любой из двух методов будет работать.

Ответ №1:

Я добился этого с помощью bootstrap breadcrumb. Я надеюсь, что это будет полезно. Если вам нужна дополнительная помощь, ответьте комментарием. 

 nav .breadcrumb {
    padding: 0;
    background: transparent;
}

.breadcrumb .breadcrumb-item a {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    font-size: 13px;
    color: #999 !important;
    z-index: 1;
    text-decoration: none;
}

.breadcrumb .breadcrumb-item {
    position: relative;
    margin: 0 15px 0 0;
    background: #575763;
    min-width: 100px;
    height: 16px;
}

.breadcrumb-item:before {
    content: "" !important;
    position: absolute;
    width: 0;
    border-top: 16px solid #575763;
    border-left: 10px solid transparent;
    left: -10px;
    top: 0;
    height: 16px;
}

.breadcrumb-item:after {
    content: "" !important;
    position: absolute;
    width: 0;
    border-top: 16px solid transparent;
    border-left: 10px solid #575763;
    right: -10px;
    top: 0;
    height: 16px;
}

.breadcrumb .breadcrumb-item:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.breadcrumb .breadcrumb-item:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.breadcrumb .breadcrumb-item:last-child:after {
    border-left: 15px solid transparent;
}

.breadcrumb .breadcrumb-item.active:first-child:before {
    border-top: 16px solid transparent;
}

.breadcrumb .breadcrumb-item.active {
    background: #61c988;
}

.breadcrumb-item.active:before {
    border-top: 16px solid #61c988;
}

.breadcrumb-item.active:after {
    border-left: 10px solid #61c988;
}  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb my-2">
        <li class="breadcrumb-item active"><a href="#">New</a></li>
        <li class="breadcrumb-item active"><a href="#">In-Review</a></li>
        <li class="breadcrumb-item"><a>Interview</a></li>
        <li class="breadcrumb-item"><a>Offered</a></li>
    </ol>
</nav>

Ответ №2:

Что-то вроде этого

 ul.breadcrumbs>li {
  display: inline-block;
  list-style: none;
  background: #61C988;
  padding: 3px 8px 3px 8px;
}

ul.breadcrumbs>li:nth-child(1) {
  border-radius: 20px 0px 0px 20px;
}

ul.breadcrumbs>li:last-child {
  border-radius: 0px 20px 20px 0px;
}

ul.breadcrumbs>li.current {
  background: #575763;
}

ul.breadcrumbs>li>a {
  color: black;
  text-decoration: none;
  font-family: "Segoe UI";
}

ul.breadcrumbs>li.current>a {
  color: white;
}  
 <ul class="breadcrumbs">
  <li><a href="">Lorem ipsum</a></li>
  <li><a href="">Vivamus nisi eros</a></li>
  <li><a href="">Nulla sed lorem risus</a></li>
  <li class="current"><a href="">Current crumb</a></li>
</ul>