diff --git a/index.html b/index.html new file mode 100644 index 0000000..d4dd8a6 --- /dev/null +++ b/index.html @@ -0,0 +1,667 @@ + + + + + + Single Element CSS Spinners + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
« More Projects +
+

Single Element CSS Spinners

+
+
+
+
+
BGFG
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
Loading...
< View Source > +
+
+
+ Star +
Fork me on GitHub + + + + + + + + + + +
+ + + + + +
+ +
+ + + \ No newline at end of file diff --git a/script/main.js b/script/main.js new file mode 100644 index 0000000..d0db545 --- /dev/null +++ b/script/main.js @@ -0,0 +1,182 @@ +$(function () { + var bg = "#0dc5c1ff"; + var fg = "#ffffffff"; + var fgrgb = "255, 255, 255"; + + if (Modernizr.inputtypes.color) { + $("html").addClass("colorpicker"); + } + + $("input[type=color]").on("change", function () { + + // Select the chosen color + var color = $(this).val(); + + if ($(this).attr("id") === "bg-color") { + + // So that the background and foreground have different format and differ while switching + if (fg.length === 7) { + color += 'ff' + } + + $("#bg-styles").remove(); + + var styles = { + 'body,.load2 .loader:before,.load2 .loader:after': { + 'background-color': color + }, + '.load3 .loader:after': { + 'background-color': color + } + }; + + addCSS(styles, "bg-styles", false); + + var load2CSS = $("#load2").find("textarea.css").val(); + var load3CSS = $("#load3").find("textarea.css").val(); + + //change BG in loader1 and loader2 + var regex = new RegExp(bg + "\\s", "g"); + var regex2 = new RegExp(bg + ";", "g"); + + load2CSS = load2CSS.replace(regex, color + ' ') + load2CSS = load2CSS.replace(regex2, color + ';') + + $("#load2").find("textarea.css").val(load2CSS) + + load3CSS = load3CSS.replace(regex, color + ' ') + load3CSS = load3CSS.replace(regex2, color + ';') + + $("#load3").find("textarea.css").val(load3CSS) + + bg = color + + } else if ($(this).attr("id") === "fg-color") { + $("#fg-styles").remove(); + + // So that the foreground and background differ while switching + if (bg.length === 7) { + color += 'ff' + } + + var styles = { + 'body': { + 'color': color + }, + 'a.twitter img': { + 'border': '1px solid' + color + }, + '.load-container': { + 'border': '1px solid ' + 'rgba(' + convertHex(color) + ',0.2)' + }, + '.load1 .loader,.load1 .loader:before,.load1 .loader:after': { + 'color': color, + 'background-color': color + }, + '.load2 .loader': { + 'color': color, + 'box-shadow': 'inset 0 0 0 1em ' + color + }, + '.load3 .loader:before': { + 'background-color': color + }, + '.load3 .loader': { + 'background': 'linear-gradient(to right, ' + color + ' 10%, rgba(' + convertHex(color) + ', 0) 42%)' + }, + '.load4 .loader': { + 'color': color + }, + '.load6 .loader': { + 'color': color + }, + '.load7 .loader': { + 'color': color + }, + '.load8 .loader': { + 'border-top': '1.1em solid rgba(' + convertHex(color) + ', 0.2)', + 'border-right': '1.1em solid rgba(' + convertHex(color) + ', 0.2)', + 'border-bottom': '1.1em solid rgba(' + convertHex(color) + ', 0.2)', + 'border-left': '1.1em solid ' + color + } + }; + + //replace here + var loadCSS; + var regex2 = new RegExp(fg + "\\s", 'g'); + var regex4 = new RegExp(fg + ";", 'g'); + var regex3 = new RegExp(fgrgb, "g"); + + var load5CSS; + $(".source").each(function (i) { + + loadCSS = $(this).find("textarea.css").val(); + + loadCSS = loadCSS.replace(regex2, color + ' ').replace(regex3, convertHex(color)); + loadCSS = loadCSS.replace(regex4, color + ';') + + $(this).find("textarea.css").val(loadCSS); + + if (i === 4) { + load5CSS = loadCSS.replace(".loader", ".load5 .loader"); + } + + }); + + fg = color + fgrgb = convertHex(color); + //add loader5 css into head + + addCSS(styles, "fg-styles", load5CSS); + } + }); + + $(".load-container a").on("click", function () { + var hash = $(this).attr("href"); + var clas = "\\" + hash.replace("#", ".") + " "; + + var re = new RegExp(clas, "g"); + + var css = $(hash).find(".css").val().replace(re, ""); + + $(hash).find(".css").val(css); + $(".overlay," + hash).removeClass("hidden"); + + return false; + }); + + $(".overlay").on("click", function () { + $(".source,.overlay").addClass("hidden"); + + }); + + function addCSS(styles, id, extra) { + var css = ''; + for (var k in styles) { + css += k + JSON.stringify(styles[k]).replace(/"/g, "").replace(/,/g, ";").replace(/(\(.*?);(.*?\))/g, function (v) { return v.replace(/;/g, ","); }); + } + + if (extra) { + css += extra; + } + + $("