Support less

[phw]

It would be great, if orbicular would also support less out of the box. I am currently using this custom conversion to orbicular.less:

// This LESS mixin is derived from the original SASS mixin
// Orbicular provides (see vendor/orbicular/_orbicular.scss).
// The mixins for vendor prefixes have been removed in favor
// of autoprefixer.

// Use this mixin to add orbicular support to your css
.orbicular(
    @barColor:  #50a6d3,    // The completed progress
    @barBg:     #EEE,       // The remaining progress
    @barWidth:  8,          // The bar width is defined as a percentage of the width of the circle
    @contentBg: #2b383f,    // The circle center
    @fontSize:  8,          // Content font-size as a percentage of the circle size
    @fontColor: #FFF,
    @transTime: 0.3s,
    @transFunc: linear,
    @shadow: ''
    ) {

    // This is the width of the progress bar itself.
    // NOT the size of the circle which is definded by it's parent element.
    //
    // The bar width is defined as a percentage of the width of the circle
    // (% of parent element width).
    @calculatedWidth: @barWidth / 100;
    @contentWidth: (1 - (2 * @calculatedWidth));

    @actualBarWidth: unit(@calculatedWidth, em);
    @actualFontSize: unit(@fontSize / 100, em);

    // this is the core progress class
    orbicular, [orbicular] {
        display: block;
        position: relative;
        height: 1em;
        box-sizing: border-box;

        *, *:after, *:before {
            box-sizing: border-box;
        }

        // Provides the bars background
        background-color: @barBg;
        border-radius: 0.5em;

        // Common traits of all the circles
        &> div.co-circle, div.co-fill {
            position:absolute;
            top: 0;
            left: 0;
            width: 1em;
            height: 1em;
            background: transparent;
            border-radius: 0.5em;
            transition: transform @transTime @transFunc;

            // This may promote the layer to a composited layer.
            // Should reduce flickering..
            backface-visibility: hidden;
            will-change: transform;
        }

        &> div.co-circle {
            // Hides half of the circle
            clip: rect(0px, 1em, 1em, 0.5em);

            &> div.co-fill {
                clip: rect(0em, 0.5em, 1em, 0em);
                background-color: @barColor;
            }
        }

        // Optional Shadow (developer to style)
        &> div.co-shadow {
            & when (@shadow = '') {
                display: none;
            }

            & when not (@shadow = '') {
                box-shadow: @shadow inset;
            }

            position: absolute;
            width: 1em;
            height: 1em;
            background: transparent;
            border-radius: 0.5em;
        }

        // Centering of the transcluded content by default
        &> div.co-content {
            position: absolute;
            overflow: hidden;

            height: unit(@contentWidth, em);
            width: unit(@contentWidth, em);
            margin-left: @actualBarWidth;
            margin-top: @actualBarWidth;

            background-color: @contentBg;
            border-radius: unit(@contentWidth / 2, em);

            & when not (@shadow = '') {
                box-shadow: @shadow;
            }

            &> div {
                position: relative;
                display: table;
                width: 100%;
                height: 100%;

                &> div {
                    display: table-row;
                    width: 100%;
                    height: 100%;

                    &> div {
                        display: table-cell;

                        font-size: @actualFontSize;
                        color: @fontColor;
                        line-height: 1em;
                        text-align: center;
                        vertical-align: middle;

                        width: 100%;
                    }
                }
            }
        }
    }
} // END mixin

[stakach]

Make a pull request with the less file included in the repo and I'll accept / keep it up to date