Task Description: There is a preloader that shows text while the page is loading. Its text coincides with the text in the header of the site. At the moment, this text "leaves" the edges of the page after it is loaded, and the main content of the site begins to "leave." It is necessary to make so that the text, which is first shown in the center of the screen, does not go beyond the edges of the page after its loading, but gets up at the right place in the header . I write everything on vue.js.
Link current code codepen : https://codepen.io/Alexxosipov/pen/OrrjzX
Problem in solution: I do not understand how to implement it. Rather, it is more correct to say that I do not see a single adequate solution.
What is now: there is header.header , which is at the top. It has a child .container , which is a flex block. There is a .loader that has position: fixed and is located in the center of the screen. It has a .loader__logo , which is identical to .header__logo . When the screen is loaded, the @keyframes block “leaves” through the @keyframes screen, as it adds the class .loader--hide , which has the values top: -120%; left: -120%; top: -120%; left: -120%; . I don’t understand how to make .loader__logo not go off the screen, but get into the place .header__logo . I understand that ideally, when the page loads, the .loader should be .header__logo with the same position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; . But how to do that?
