jquery code with curly braces in selecting jquery object

Question

After searching for a semi circle fill solution i came across this codepen code. What does selector {p:0} select? Also how var perc value got into {p:perc}?

https://codepen.io/jagathish/pen/ZXzbzN

$(".progress").each(function(){

  var $bar = $(this).find(".bar");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);

  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
        // 45 is to add the needed rotation to have the green borders at the bottom
      });
      $val.text(p|0);
    }
  });
});

Answer 1

What does selector {p:0} select?

{p:0} is an object; it doesn't select anything. This object is then wrapped in a jQuery object and you can then use jQuery methods to amend the properties of the original object. In this case they are using animate() to increment the value of p (which starts at 0) at intervals to update the progress bars in the UI.

How does the perc value got into {p:perc}

The perc value is defined within the each() block. It relates to the text() of the span within each .progress element.