:dance:
У меня было хорошее настроение, ибо вчера должны были открыть один важный для меня сайт, коротой я ждал месяц,
А сегодня открытие перенесли еще на неделю...

Нелогично. Тормоза бывают разные и если помещать всё в одну полосу, то:

100% загрузки есть, ставим 100%, обработка идет, добавляем забор(в полосу можно дописать"обработка"), получен ответ - отключаем полосу и выводим всплывающее сообщение "сохранено".

Так я пожалуй и сделаю. Конечно можно разбить действия на части и всплытий всяких надобавлять, но в одну полосу будет интуитивней.

Ты про это чтоль?

<style>
  #bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: red;
    box-sizing: border-box;
    -webkit-box-shadow: 1px 1px 6px 0px #333;
    -moz-box-shadow: 1px 1px 6px 0px #333;
    box-shadow: 1px 1px 6px 0px #333;
    -o-transition: 1s width ease;
    -ms-transition: 1s width ease;
    -moz-transition: 1s width ease;
    -webkit-transition: 1s width ease;
    transition: 1s width ease;
    width: 0;
    overflow: hidden;
  }

  #bar:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 50px;
    height: 100%;
    animation: trololo 2s linear infinite;
    background: linear-gradient(45deg, red 15%, white 50%, red 85%);
    margin-left: -25px;
  }

  @keyframes trololo {
    from {
      left: 0;
    }

    to {
      left: 100%;
    }
  }
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>

да, типа того :)