CODEWITHSUNDEEP
cssprogress-barbootstrap-4
core114
core114

Reputation: 5335

Image around the progress bar circle issue

Im added progress bar circle, I need to add image around the progress bar, but I cant do it correctly. I've added the background for the image, but its not good solution because I need to create for the list, maybe 40 circles, how to add correctly image around the progress bar?

I'm using this http://www.jqueryscript.net/loading/Dynamic-Circular-Progress-Bar-with-jQuery-CSS3.html

This is example (im try to make like this)

enter image description here

I've this code:

.progress-bar div span {
  position: absolute;
  color:transparent;
  line-height: 175px;
  height: 175px;
  width: 175px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
 background:url(user.png)no-repeat;
}

Upvotes: 0

Views: 1832

Answers (2)

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

You can do this with jquery.

First, create a variable that contains an array, you can name it however you want.

var images = [
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg',
'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg',
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg'

Then you say that for each .progress-bar div span, add a css elementbackground-image with the url to your pictures, that you take from the images variable.

var i=0
$('.progress-bar div span').each(function() {
    $(this).css('background-image', 'url('+images[i]+')');
    i = (i + 1) % images.length;
});

Try it and let me know if it helped you!.

EDIT

The example below will give you a general idea on how it works.

var images = [
  'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg',
  'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg',
  'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg'
];

var i = 0;
$('.progress-bar div span').each(function() {
  $(this).css('background-image', 'url(' + images[i] + ')');
  i = (i + 1) % images.length;
})
.progress-bar div span {
  background-size: cover;
  display: block;
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
</div>

EDIT 2:

This is another example that has circles:

https://codepen.io/anon/pen/qXLozZ

Upvotes: 2

core114
core114

Reputation: 5335

Finally I found the solution Im used jquery-circle-progress

https://github.com/kottenator/jquery-circle-progress

im used this <span class="schoolclass-pro-bar-img"></span> and im put the image between <span> tag

 <div ID="circle1">
<span class="schoolclass-pro-bar-img"></span>
</div>

Upvotes: 0

Related Questions