I wonder if it's possible to put an image inside the bootstrap progress bar, while the bar is walking, so the front of it will type a small cart. Would that 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>
Yes you can, you have to work with the .progress-bar-striped class and override Bootstrap default values.
To leave only one image at the end of the bar where it completes, just put the CSS like this, Notice that the Background is aligned to the right of the green bar, so it follows the progress of the bar.
See working on the 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 undefined 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 */
}
NOTE: The image will always be with the full width of the completed bar. Notice 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 for 10% it will become within 10% of the size of the bar ... 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>