Circular Progress Bar

Circular Progress Bar

  
Hey,

I'm trying to create a circular progress bar to track one's progress through a category of questions. I've managed to make horizontal progress bars work within my app, but the circular one seems to be throwing me off.

I'm hoping to make it look like one of the circular bars at the bottom of this link: http://codepen.io/geedmo/pen/InFfd.

Does anyone have any ideas?

Thanks,

Theresa
Hi Theresa.
Attached is a sample eSpace, based on the link you sent.

Here's what I did.
  1. Stuff like this should be reusable, so I created a WebBlock with an Integer input parameter
  2. Looking at your link, the HTML seems to be pretty simple for each bar, so I put it inside an expression with "Escape Content: No". This will make whatever is inside be interpreted as HTML.
  3. I modified the HTML to have in mind the value of the input parameter
    "<div class='progress-radial progress-"+If(Substr(Percentage/10,Index(Percentage/10,".")+1,1) = "5",Percentage,Round(Percentage/10,0)*10)+"'><div class='overlay'>"+Percentage+"%</div></div>"
    I have to calculate the classname for progress-x, because the generated classes exist only for numbers ending in 0 or 5. The correct percentage is always readable.
  4. Pasted the compiled CSS, directly from your link to the WebBlock's CSS section
    /* -------------------------------------
     * Bar container
     * ------------------------------------- */
    .progress-radial {
      float: left;
      margin-right: 30px;
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid #2f3439;
      background-color: tomato;
    }
    
    /* -------------------------------------
     * Optional centered circle w/text
     * ------------------------------------- */
    .progress-radial .overlay {
      position: absolute;
      width: 60px;
      height: 60px;
      background-color: #fffde8;
      border-radius: 50%;
      margin-left: 20px;
      margin-top: 20px;
      text-align: center;
      line-height: 60px;
      font-size: 16px;
    }
    
    /* -------------------------------------
     * Mixin for progress-% class
     * ------------------------------------- */
    .progress-0 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-5 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-10 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-15 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-20 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-25 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-30 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-35 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-40 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-45 {
      background-image: linear-gradient(90deg, #2f3439 50%, transparent 50%, transparent), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-50 {
      background-image: linear-gradient(-90deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-55 {
      background-image: linear-gradient(-72deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-60 {
      background-image: linear-gradient(-54deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-65 {
      background-image: linear-gradient(-36deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-70 {
      background-image: linear-gradient(-18deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-75 {
      background-image: linear-gradient(0deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-80 {
      background-image: linear-gradient(18deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-85 {
      background-image: linear-gradient(36deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-90 {
      background-image: linear-gradient(54deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-95 {
      background-image: linear-gradient(72deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
    
    .progress-100 {
      background-image: linear-gradient(90deg, #ff6347 50%, transparent 50%, transparent), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
    }
  5. Dropped the WebBlock inside a page, filled the Input parameter with a percentage
Best regards.

That's amazing.

Thank you so much for your help; it's very much appreciated.
Should post it to Forge! Cool!!

Nice

It doesn't seem to work in IE9, btw.