Text disappears behind image slidebar - html

I have a problem: I made a slidebar that shows the pictures. Now I want to continue underneath by putting text and other things on the page, but if I try to just insert a text below, for example, the text will not be written under the slideshow but under the slideshow.
Here is the code I hope you can help me.
div.slider {
display: flex;
width: 92%;
height: 750px;
margin-bottom: 20px;
margin-left: 4%;
margin-right: 4%;
margin-top: 20px;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
}
div.slider > * {
position: absolute;
display: flex;
widows: 100%;
height: 100%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
div.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/amsterdam.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/barpark.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/florence.jpg);
background-size: cover;
background-position: center;
}
div.slide:nth-child(4) {
left: 100%;
animation-delay: 8s;
background-image: url(https://wowslider.com/sliders/demo-7/data/images/gate.jpg);
background-size: cover;
background-position: center;
}
div.slide p {
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff
}
#keyframes slide {
0% { left: 100%; width: 100%;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%;}
30.0001% { left: -100%; width: 0%;}
100% { left: 100%; width: 0%;}
}
<html>
<body>
<div class="slider">
<div class="slide"><p>Slide1</p></div>
<div class="slide"><p>Slide2</p></div>
<div class="slide"><p>Slide3</p></div>
<div class="slide"><p>Slide4</p></div>
</div>
<div>
<p>Text that should appear under the slideshow.</p>
</div>
</body>
</html>


Change position of div.slider to relative

Related

Div Moving Around

Okay so I have been trying everything I can think of to get this div to stay where it is on any browser and I thought I would turn to you wonderful people to try to help me (I am sure its an easy fix that I have overlooked)
No matter what I do it seems to mess things up elsewhere.
I have tried to put all divs (and the body) into fixed position (and this seems to have worked to an extent)
I have also tried to make the whole page flex in the hope that if I allow flex to work then it will flex around the offending items.
I have literally spent 2 days bashing my head against a wall with this and I could really use another set of eyes on my code to show me where I am going wrong.
Thankyou so much for your responses
I have updated my code to now run without images and with colours instead. I have managed to sort some of the issues out I was having but now when I move the page from bottom up the blue door shrinks
#opening {
background-color: red;
min-width: 100%;
max-width: 100%;
max-height: 100%;
min-height: 100%;
margin-left: 0;
margin-right: 0;
background-attachment: fixed;
}
.wrap {
background-color: purple;
background-position: fixed;
min-height: 140px;
max-height: 140px;
max-width: 360px;
min-width: 360px;
color: #fff;
position: fixed;
margin: 20vh;
margin-left: 42%;
padding: 30% 2% 0% 0%;
}
div.left {
background-color: blue;
text-align: center;
max-width: 34vh;
max-height: 62vh;
min-width: 34vh;
min-height: 62vh;
/* background-image:url("door.png") ; */
background-position: fixed;
background-repeat: no-repeat;
margin-left: 42.1%;
margin-top: 12.5%;
animation-name: open-left;
animation-duration: 10s;
animation-easing-function: cubic-bezier(.06, .63, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 10s;
position: fixed;
top: 0;
left: 0;
}
#-webkit-keyframes open-left {
from {
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 20%;
}
to {
-webkit-transform: perspective(500) rotateY(89deg);
-webkit-transform-origin: 0% 20%;
}
}
button {
background-color: #000000;
max-width: 70%;
max-height: 20;
border: white;
border-style: double;
color: white;
text-align: center;
text-overflow: unset;
font-size: 20px;
margin-left: 1%;
}
<body id="opening">
<div class="wrap">
<span class="animated rubberBand infinite">
<div>
<div>
<button onclick="location.href = 'https://www.google.com';"class="button"> And the Gunslinger followed </button>
</div>
</div>
</span>
<div class="left">
</div>
</div>
</body>
this gives me an output of this on a full screen
Full size page, no shrink
and this is the output when I shrink the screen to the left
Div position moves

Is this what you are after?
html,
body {
display: flex;
background: #000 url('https://keiraj87.github.io/website/backg.png') top center no-repeat;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#door-wrap {
height: 295px;
width: 175px;
margin: 150px auto 0 auto;
perspective: 420px;
transform-style: preserve-3d;
}
#door {
height: 100%;
width: 100%;
background: url('https://keiraj87.github.io/website/door.png') top center no-repeat;
background-size: 175px;
animation: open-left 10s cubic-bezier(.06, .63, 0, 1) 0s 1 forwards;
margin-left: -88px;
}
#keyframes open-left {
from {
transform: rotateY(0deg) translateX(88px);
}
to {
transform: rotateY(-85deg) translateX(88px);
}
}
<div id="door-wrap">
<div id="door">
</div>
</div>

Animation when hovering object-fit: contain <img>

On mouse hover, animated span tags beneath an img work fine when the img isn't using object-fit: contain like below:
body {
height: 100%;
width: 100%;
margin: 0
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
}
.product {
position: relative;
width: 150px;
}
img.content {
background: white;
height: auto;
margin: 8%;
position: relative;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<p>Hover image please</p>
<div class="product">
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
</div>
</div>
</body>
But when the img is using object-fit: contain the animated spans take up the entire area:
body {
height: 100%;
margin: 0;
}
.container {
max-width: 600px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 700px;
}
.product {
height: 100%;
position: absolute;
}
.content {
background: white;
margin: 8%;
position: relative;
width: 84%;
height: 100%;
vertical-align: middle;
z-index: 5000;
object-fit: contain;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effect-1"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<span class="effect-2"><img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg"></span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>
How do you make these hover effects apply only to the area around the image (not the entire area) when using object-fit: contain? The image must remain vertically centered using object-fit.

Is this what you wanted? The image is centered between the animated divs.
The reason why your image is larger in the second example you've given is because you've changed your CSS there. You've changed the height/width values of .container, .product etc, so the children elements are showing up larger, because they inherit these values.
I've changed max-width and min-height in .container to reduce the overall size. And the width of .content should be less than the width of the effect divs
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
max-width: 300px;
/* This is new */
position: relative;
text-align: center;
width: 100%;
height: 100%;
min-height: 300px;
/* This is new */
}
.product {
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
display: flex;
align-self: center;
background: white;
margin: 0 auto;
position: relative;
width: 65%;
/* This is new */
object-fit: contain;
/* This is new */
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: flex;
}
.effects {
position: absolute;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: flex;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
visibility: visible;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
.placeholder {
width: 84%;
height: auto;
visibility: hidden;
object-fit: contain;
display: flex;
margin: 0 auto;
align-self: center;
position: relative;
}
#keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
<body>
<div class="container">
<div class="product">
<span class="effects">
<img class="placeholder" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
<span class="effect-1"></span>
<span class="effect-2"></span>
</span>
<img class="content" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/Golden-Retriever-Puppies-in-basket.jpg">
</div>
</div>
</body>

Centering a slideshow with HTML and CSS

I am attempting to develop a website to better my web development understanding and have run into an issue implementing a website. I am struggling figuring out how to neatly center my slideshow I have implemented for the home screen so i can develop my header, footer and nav bar around it. Any help on this end would be greatly appreciated. the HTML code used looks like this.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0px;
}
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
margin: 0px auto;
}
slider>* {
position: absolute;
display: block;
width: 50%;
height: 50%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
margin: 0px auto;
}
slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(1.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2) {
animation-delay: 2s;
background-image: url(2.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(3) {
animation-delay: 5s;
background-image: url(3.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4) {
left: 0%;
animation-delay: 8s;
background-image: url(4.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% {
left: 100%;
width: 100%;
}
5% {
left: 0%;
}
25% {
left: 0%;
}
30% {
left: 0%;
}
30.0001% {
left: -100%;
width: 0%;
}
100% {
left: 100%;
width: 0%;
}
}
<slider>
<slide>
<p>Slide 1</p>
</slide>
<slide>
<p>Slide 2</p>
</slide>
<slide>
<p>Slide 3</p>
</slide>
<slide>
<p>Slide 4</p>
</slide>
</slider>

As far as I understand, you want to center the slider in the body. If so, you need to change absolute by relative of position of slider.
slider {
display: block;
width: 1280px;
height: 50%;
background-color: #1f1f1f;
overflow: hidden;
position: relative;
margin: 0px auto;
}

You can center-align the slider by many ways. Like using the center tag although it is not recommended.
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
You can change your css code to this:
slider {
display: block;
margin-left: auto;
margin-right: auto;
// margin: 0 auto;
}
Or you can enclose slider in a div and add text-align: center to the div (aka wrapper or container) and add display: inline-block to slider
If you want to keep your position: absolute, then you can write your css like this.
slider {
position: absolute;
left: 50%;
margin-left: 640px; //half of the width
// you can also use:
// transform: translate(-50%, 0px);
// instead of margin-left
}
Also see these two for more ways and explanation:
https://www.w3schools.com/css/css_align.asp
https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

How overlap an image over a circle?

This is the circular effect I trying to reproduce. There is a grey circle and a animated spinning red reticle when hover over the picture.
I try with border-radius but didnt work.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
width: 111px;
height: 111px;
border-radius: 100%;
background-color: black;
background-position: 0px -555px;
}
.bg-Black_Panther {
width: 73px;
height: 111px;
background-position: 0px -777px;
}
.bg-Black_Widow {
width: 73px;
height: 111px;
background-position: 0px -888px;
}
.bg-Bullseye {
width: 73px;
height: 111px;
background-position: 0px -999px;
}
.bg-Cable {
width: 73px;
height: 111px;
background-position: 0px -1110px;
}
.bg-Captain_America {
width: 73px;
height: 111px;
background-position: 0px -1221px;
}
.bg-Captain_Marvel {
width: 73px;
height: 111px;
background-position: 0px -1332px;
}
.bg-Carnage {
width: 73px;
height: 111px;
background-position: 0px -1443px;
}
<div class="container">
<div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
<div>
<i class="sprite bg-Black_Panther"></i>
<b>Black Panther</b>
</div>
<div>
<i class="sprite bg-Black_Widow"></i>
<b>Black Widow</b>
</div>
<div>
<i class="sprite bg-Bullseye"></i>
<b>Bullseye</b>
</div>
<div>
<i class="sprite bg-Cable"></i>
<b>Cable</b>
</div>
<div>
<i class="sprite bg-Captain_America"></i>
<b>Captain America</b>
</div>
<div>
<i class="sprite bg-Captain_Marvel"></i>
<b>Captain Marvel</b>
</div>
<div>
<i class="sprite bg-Carnage"></i>
<b>Carnage</b>
</div>
</div>

You should use two separate img with transparent png.
Also, using CSS from here endless rotation you may animate the red circle.
Here is a working example
body {
background-color: black;
}
.character-container img {
position: absolute;
}
.circle {
top: 50px;
left: 30px;
}
.character {
left: 37px;
top: 26px;
}
/* FROM https://stackoverflow.com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation */
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 20s linear infinite;
-moz-animation: rotating 20s linear infinite;
-ms-animation: rotating 20s linear infinite;
-o-animation: rotating 20s linear infinite;
animation: rotating 20s linear infinite;
}
<div class="character-container">
<img class="circle rotating" src="data:image/png;base64,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">
<img class="character" src="data:image/png;base64,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">
</div>

Sorry I cleaned it up a bit before working on it but I think positioning is the way to go.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>

You can create an additional wrapper around the image and make the position of inner image absolute with a negative top property to get this effect. Here is the code with just one item:
.container {
padding: 50px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: #333;
color: #fff;
}
.hero {
text-align: center;
}
.circle {
width: 90px;
height: 90px;
border-radius: 100%;
background-color: black;
text-align: center;
position: relative;
border: 1px solid #ddd;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
position: absolute;
top: -20px;
left: 10px;
width: 111px;
height: 111px;
background-position: 0px -555px;
}
<div class="container">
<div class="hero">
<div class="circle">
<i class="sprite bg-Ant_Man"></i>
</div>
<b>Ant-Man</b>
</div>
</div>
Fiddle: https://jsfiddle.net/abhas9/4veot6xf/12/

Pseudo elements are my beloved when need minor decorating.
body {
background-color: #333;
}
img {
display: inline-block;
position: relative;
z-index: 9999;
}
.portrait {
position: relative;
}
.portait:after {
content: '';
display: block;
border: 3px solid #666;
width: 77px;
height: 77px;
border-radius: 50px;
position: absolute;
top: 37px;
left: 22px;
}
<div class="portait">
<img src="https://ae01.alicdn.com/kf/HTB1VSHlRxjaK1RjSZFA762dLFXaO.png" alt="">
</div>

Try this:
.container div::before {
content: "";
display: block;
position: absolute;
width: 72px;
height: 72px;
background: black;
border-radius: 50%;
z-index: 0;
top: 36px;
border: 1px solid white;
}
.container div, .container div * {
position: relative;
}
.bg-Ant_Man {
border-radius: 0;
background-color: none;
}

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>

Attach multiple divs and make them responsive

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>

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>