Изменение позиции блока с центра экрана на “своё” место в блоке

Описание задачи: Есть прелоадер, который показывает текст, пока страница грузится. Его текст совпадает с текстом в шапке сайта. На данный момент, данный текст "уезжает" за края страницы после её загрузки, а основной контент сайта начинает "выезжать". Нужно сделать так, чтобы текст, который сначала показывается по центру экрана, не уходил за края страницы после её загрузки, а вставал на нужное место в header. Все пишу на vue.js.

Ссылка текущего кода на codepen: https://codepen.io/Alexxosipov/pen/OrrjzX

Проблема в решении: Я не понимаю, каким образом это реализовать. Вернее, правильнее сказать, что не вижу ни одного адекватного решения.

Что есть сейчас: есть header.header, который находится вверху. Он имеет дочерний .container, который является flex блоком. Есть .loader, который имеет position: fixed и располагается по центру экрана. В нем есть .loader__logo, который идентичен с .header__logo. При загрузке экрана, через @keyframes блок .loader "уезжает" за пределы экрана, поскольку ему добавляется класс .loader--hide, который имеет значения top: -120%; left: -120%;. Не понимаю, как сделать так, чтобы .loader__logo не уезжал за пределы экрана, а вставал на место .header__logo. Понимаю, что в идеале, при загрузке страницы, на место.loader должен встать .header__logo с теми же position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;. Но как это сделать?