Attach multiple divs and make them responsive - html

Question

Hellow Guys,
I'm creating a loading animation with HTML and CSS. As I'm not really skilled in responsive front-end, I'm really struggling with making the text and the circle responsive.
What I really want is to attach the div with the background image and the text to the bar and make them responsive in order not to move and remain at the same position.
This is what I want to achieve:
Here's the code of what I have at the moment. I've tried attachment fixed and stuff like that, but the main problem is that the image keeps scaling when I use a max height/width and the text moves to the right depending on the width of the website.
Hope you can help me, thanks in advise.
body {
background: #111 url("");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.logo {
background: url("https://openclipart.org/download/256338/whitecircle.svg");
background-size: 25vmin;
background-repeat: no-repeat;
position: absolute;
left: 28%;
bottom: 10vh;
height: 25vh;
width: 100px;
max-width: 150px;
}
h1 {
color: #fff;
position: absolute;
bottom: 20vh;
left: 35%;
}
.progress {
width: 400px;
max-width: 85vw;
height: 8px;
position: absolute;
bottom: 20vh;
left: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="logo"> </div>
<h1 class="title"> Loading </h1>
<div class="progress"> </div>

Answer 1

What I normally do to make an item responsive and many parts need to work closely together is, create a container which holds all items that are related. Then within the container I align item using % so they scale nicely. The main container (in my example called loader) I use width and height using the vh and vw units.
Here's one way you can solve this. I've also replaced the SVG with a circle made using css. This way you don't need to load the image. It will make your page less resource heavy. Let me know if you specifically want to use the SVG and I can update the example.
NOTE: I added a light border to the loader div so you can see how it resized when you resize the window. Remove it when you copy it to your page.
body {
height: 100vh;
margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
position: relative;
height: 30vh;
width: 50vw;
min-width: 200px;
min-height: 100px;
border: 1px solid #444; // added to see the responsiveness
}
.circle {
width: 55px;
height: 55px;
bottom: calc(40% - 27.5px);
left: -2px;
position: absolute;
border: 5px solid white;
border-radius: 50%;
}
h1 {
color: #fff;
position: absolute;
left: 75px;
bottom: 32%;
}
.progress {
position: absolute;
width: calc(100% - 60px);
height: 8px;
bottom: 40%;
left: 60px;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="loader">
<!--<div class="logo"> </div>-->
<!--<img class="img-logo" src="https://openclipart.org/download/256338/whitecircle.svg">-->
<div class="circle"></div>
<h1 class="title">Loading</h1>
<div class="progress"></div>
</div>