Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div style="margin: 0 auto; width: 800px;">
  <div>
	  <div class="ratings-load-msg">
		  <img src="http://www.northlakecollege.edu/_layouts/images/gears_anv4.gif" class="sp-gears" /><span id="wait-msg">Loading Ratings...</span>
	  </div>
	  <svg id="ratingsWrapper" height="60" width="180">
    </svg>
  </div>
</div>
              
            
!

CSS

              
                	.ratings-load-msg {
		position: relative;
     top: 28px;
		left: 16px;
	}
	.sp-gears {
	    position: relative;
	    top: 8px;
	}
  
#ratingsWrapper { border: thin blue dotted; }

              
            
!

JS

              
                $(document).ready(function () {
            //defines SVG circle paths..
            var outerCircle = "M8.6 14.5L4.1 17.2C4.48996 19.0654 5.54326 20.9351 6.89498 22.2714C8.17013 23.5319 9.60781 24.4326 11.3 25.0213C12.4493 25.4211 13.5956 25.5 14.8 25.5C24.1656 25.5 29.197 14.0203 22.8925 7.10008C21.9869 6.10607 20.8468 5.19277 19.6 4.6615C17.6027 3.81039 15.53 3.40572 13.4 3.61698C10.0562 3.94057 6.74251 6.1291 5.17454 9.1C4.85677 9.70209 3.93163 11.0509 4.17076 11.7671C4.29506 12.1395 4.98439 12.4188 5.3 12.6078L8.6 14.5z";
            var innerCircle = "M14.4 8.64244C13.2754 8.78829 12.3584 8.92856 11.4 9.60432C7.8376 12.1162 8.07516 17.6363 11.9 19.7956C13.1061 20.4765 14.4632 20.5509 15.8 20.3844C16.5291 20.2936 17.1672 20.0225 17.8 19.6572C22.9208 16.7013 20.5541 7.84429 14.4 8.64244z";
            
            var avgRating = 3.41;
  
            //simulate data pull
            $('.ratings-load-msg').hide();
  
            var s = Snap("#ratingsWrapper");
            var ratingMsg = "Average Rating: " + avgRating;
            var msg = s.text(25, 50, ratingMsg);
            
            for (var i = 0; i < 5; i++) {
                x = (i + 1) * 27.5;
                var gradLine = 0;

                var ratingsRemainder = avgRating - i;
                if (ratingsRemainder > 0)
                    gradLine = ratingsRemainder * 100;
                if (ratingsRemainder > 1)
                    gradLine = 100;

                /* 50 = RP Orange to White center gradient line (three values at 50)
                    // Dont's ask me why there needs to be three, but they all need the same value
                    //to produce a solid vertical line
                    var g = s.gradient("l(0, 0, 1, 0)#0000FF:50-#fff:50-#fff:50-#fff");
                */
                
                var grad = s.gradient("l(0, 0, 1, 0)#ec602f:" + gradLine + "-#fff:" + gradLine + "-#fff:" + gradLine + "-#fff");

                var wrap1 = s.svg().attr({ x: x, y: '10' });
                var grp = wrap1.group();
                
            
                var rp1 = wrap1.path(outerCircle).attr({
                    //fill: '#ec602f',
                    fill: grad,
                    stroke: "#ec602f",
                    strokeWidth: 1,
                    g: grp
                }).data("i", i + 1)
                .click(function () {
                        alert(this.data("i"));
                })
                .hover(
                    function () {
                        msg.attr({ text: "Click Logos to Rate" });
                        this.attr({ stroke: "#e9e6e2" });
                    },
                    function () {
                        this.attr({ stroke: "#ec602f" });
                    }
                );

                var rp1i = wrap1.path(innerCircle).attr({
                    fill: '#fff',
                    stroke: "#ec602f",
                    strokeWidth: 1,
                    g: grp
                }).data("i", i + 1)
                .click(function () {
                    alert(this.data("i"));
                })
                .hover(
                    function () {
                        msg.attr({ text: "Click Logos to Rate" });
                        this.attr({ stroke: "#e9e6e2" });
                    },
                    function () {
                        this.attr({ stroke: "#ec602f" });
                    }
                );
            }
        });

              
            
!
999px

Console