Александр Голубев

Пример в вопросе нерабочий.

А в общем самый простой вариант добавить :after к полосе прогресса, тогда он будет ползти сразу в конце полосы загрузке.
Статья про CSS прогресс бары:
aleksandrgolubevblog.ru/css-progress-bar-s-menyayu...

На примере прогресс бара в статье как можно реализовать:
Добавить код:

.progress-bar span:after {
    content: "";
    display: block;
    height: 53px;
    width: 6px;
    background-color: aqua;
    margin-left: 100%;
}

И вот что мы получим:
codepen.io/piocan/pen/OMPegE

Конкретно для вашего случая нужно добавить вместо Background-color - Background с url изображения.

Очевидно что на сайте с которого вы хотите скопировать бекграунд стоит particles.js которые вы можете поставить себе по ссылке ниже, там можно настроить разные варианты бекграунда.

vincentgarreau.com/particles.js

Нужно исправить в классе .tng ul li img - margin-right, например на 33px, и у вас будет большой отступ.

.tng ul li img {
  margin-right: 5px;
    margin-bottom: -4px;
}

Можно спрятать стандартный элемент и сделать новый, вот так:
mentor-framework.ru/?p=157

Нужно делать через display none, вот пример: http://mentor-framework.ru/слайдер/

Это меню сделано по такому принципу,

Я делал сайты раньше без CMS, но когда мне понадобилось добавить сайту динамики выбрал WP.
Там все просто, у нас может быть много разных полей - Заголовок, Миниатюра, Описание, Основной контент, дополнительные поля и они все выводятся php, wp функциями, например вывод заголовка поста с ссылкой на него:

<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

Все достаточно просто, и код может быть чистым. Страница собирается минимум из 3-4 фалов, один это шапка, другой тело, футер и контент например, мы просто указываем ссылки на файлы вроде:
<?php get_header(); ?>

Собственно можно сделать что угодно, начиная от блога и заканчивая магазинами.
Вот один из моих сайтов, в нем 4 потока разных публикаций разного формата (сделано на WP):
wartbook.ru

Обычный transition должен заработать, если меняются параметры подвластные CSS (Top, Bottom, Left, Right, Padding, Margin и т.д.)

<svg style="transition: all .8s;"><path></path></svg>

Только позиция SVG должна меняться.

Можно спокойно сократить до:

<div class="col-lg-6 row">
        <a class="image" href="#"><img src="imagen.png"></a>
        <h2 class="text">Hello</h2>
</div>

Результат будет такой же.
Для выравнивания добавить к a.image {float: left}