1
I wonder if it is possible to place an image inside the bootstrap progress bar, while the bar goes walking, soon the front of it goes like a small cart. That would be possible?
Progress bar:
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
0
Yes it is possible you have to work with the class .progress-bar-striped and overriding Bootstrap’s default values.
To leave only one image at the end of the bar where it goes completing just put the CSS like this, Note that the Background is aligned to the right of the green bar, so it tracks the progress of the bar.
See working on Snippet below:
.progress-bar-striped {
background-image: url(http://www.gmstatic.com/templates/default/images/ok_icon.png);
background-repeat: no-repeat;
background-position: top right;
background-size: 20px;
background-color: rgb(232, 255, 232);
}
If you want an image occupying the Indeita Bar.
.progress-bar-striped {
background-image: url(http://www.almowazi.com/Images/Titles/News_ar.png); /* sua imagem */
background-repeat: no-repeat; /* imagem não repete dentro da barra */
background-position: top left; /* imagem inicia a esquerda */
background-size: 100%; /* imagem fica com 100% da largura da barra completada */
background-color: black; /* cor de fundo caso a imagem não carregue */
}
OBS: The image will always be the full width of the slider completed. See that the <div class="progress-bar... style="width: 80%"> is at 80% and the image will complete the entire bar, and when it is 100% the image will "sneeze" until she’s 100% and if she’s 10%, she’ll stay "compressed" within 10% of the bar size... Then choose an image that can be compressed horizontally without major problems.
Snipper with the image at the end of the right bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
width: 90%;
margin: 2rem auto 0;
}
.progress-bar-striped {
background-image: url(http://www.gmstatic.com/templates/default/images/ok_icon.png);
background-repeat: no-repeat;
background-position: top right;
background-size: 20px;
background-color: rgb(232, 255, 232);
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (success)</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Browser other questions tagged html5 css3 bootstrap-3 bootstrap-4
You are not signed in. Login or sign up in order to post.
Very good! But could show only one image? without being all those, show only one and show it at the end?
– Maria
@Maria edited my reply to stay the way you wanted, look if it suits you. I left all comments in CSS
.progress-bar-stripedwhich is at the beginning of the answer. Qq thing tells me.– hugocsl
But like, I don’t want the image to expand, do I? I want just one, but it little walking according to progress. e.g. : if ta 100% the image will be there at the end, but small
– Maria
@Maria Now I think it’s the way you wanted it, Executo and Snippet to see.
– hugocsl
Exactly that! Thank you so much :D
– Maria
@Maria use the
background-size: 20px;in my example I put 20px, but you can put the size you want, including in %, like 10%. There goes your image, and the width you will want in the bar. By padão the bar has just 20px of height. []s– hugocsl
I saw it. Thank you!!
– Maria