JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

CSS

.dotProgress {
    background: #000;
}

.dotProgressMask {
    margin-left: auto;
    margin-right: auto;
    display: block;
    overflow: hidden;
}

.active {
    background: red;
}

JavaScript

enyo.kind({
    name: "dotProgressBar",
    segments: 10,
    height: 10,
    width: 10,
    margin: 2,
    published: {
        currentSegment: 0    
    },
    onCurrentSegmentChange: function(){
        console.log("segment change");    
    },
    components: [
        {name: "dotProgressMask", classes:"dotProgressMask", components:[
            {name: "dotProgressContainer", 
                 classes: "dotProgressContainer", 
                 components:[]
            }
        ]},
    ],
    create: function(){
        this.inherited(arguments);
        //setup the dotProgress
        var opts = this;
        var totalSegments = this.segments || 1;
        
        //styling for dots using options
        var style = [
            "height:",
                opts.height,
            "px;",
            "width:",
                opts.width,
            "px;",
            "margin-right:",
                opts.margin,
            "px;",
            "float:left;"
        ];
        
        // create an array of segments
        var segments = Array.apply(null, new Array(totalSegments)).map(function(o,i){
           return {
               classes: "dotProgress",
               style: style.join("")
           }
        });
        //add active class to first 
        segments[this.currentSegment].classes += " active";
        //calculate total width
        var totalWidth = this.segments * this.width + (this.margin * this.segments);
        //remove margin for mask centering
        var maskWidth = totalWidth - this.margin;
        //create components
        this.$.dotProgressContainer.createComponents(segments);
        //alter styling
        this.$.dotProgressContainer.setStyle("width:" + totalWidth + "px");
        this.$.dotProgressMask.setStyle("width:" + maskWidth + "px");
    }
});


var bar = new dotProgressBar();
bar.renderInto(document.body);
bar.setSegment(2);