fill circle on depending on percentage ( mailing template )

Question

I'm preparing a custom mailing, through php, and I need to prepare four custom circles, filled on depending on some percentages ( which I receive them dinamically ), so I need some html tags for do it:

Firstly, I thought in canvas tag, but I read that a lot of email clients don't support canvas tag: https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
So, I thought in svg tag, but now I realize that, for do the calculation of the percentage, I need javascript to do it, and mail clients don't support javascript either.

So, I understand that I can't do it to mailing templates, right?

Thanks you very much!

why would you need javascript? can't you do the calculations in php? — Holger Will, Oct 26 '15 at 13:04

score 0 · Answer 1 · answered Oct 27 '15 at 04:42

Following code snnippet may work for you

CSS

/**
 * HTML5 / CSS3 Circle with Partial Border
 * http://stackoverflow.com/q/13059190/1397351
 */
* { margin: 0; padding: 0; }
.circle {
    position: relative;
    margin: 7em auto;
    width: 16em; height: 16em;
    border-radius: 50%;
    background: lightblue;
}
.arc {
    overflow: hidden;
    position: absolute;
    top: -1em; right: 50%; bottom: 50%; left: -1em;
    transform-origin: 100% 100%;
    transform: rotate(45deg) skewX(30deg);
}
.arc:before {
    box-sizing: border-box;
    display: block;
    border: solid 1em navy;
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

HTML

<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
    <div class='arc'></div>
</div>

fill circle on depending on percentage ( mailing template )

1 Answers1