Skip to content

Fix switching same colors #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: step2
Choose a base branch
from
+849 −0
Open

Fix switching same colors #36

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ecdb18f
Fix: same background and forground when choosing white background fir…
HatimLagzar May 23, 2020
5fd2024
Fix the issue for all colors
HatimLagzar May 24, 2020
bb276c6
Fix switching between the same colors in both directions
HatimLagzar May 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
667 changes: 667 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,667 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Single Element CSS Spinners</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="A collection of loading spinners animated with CSS">
<meta name="keywords" content="loading, spinners, indicator, css, single element, css3, luke haas, github, html5">
<meta property="og:title" content="Single Element CSS Spinners">
<meta property="og:type" content="website">
<meta property="og:description" content="A collection of loading spinners animated with CSS">
<meta property="og:image" content="https://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg">
<meta property="og:url" content="https://projects.lukehaas.me/css-loaders/">
<meta name="twitter:site" content="@lukehaas">
<meta name="twitter:domain" content="projects.lukehaas.me">
<meta name="twitter:card" content="player">
<meta name="twitter:url" content="https://projects.lukehaas.me/css-loaders/">
<meta name="twitter:title" content="Single Element CSS Spinners">
<meta name="twitter:description" content="A collection of loading spinners animated with CSS">
<meta name="twitter:player" content="https://projects.lukehaas.me/css-loaders/smaller3.gif">
<meta name="twitter:image" content="https://projects.lukehaas.me/css-loaders/screenshot.gif">
<meta name="twitter:player:width" content="440">
<meta name="twitter:player:height" content="320">
<script src="script/modernizr-2.8.2.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300">
<link rel="stylesheet" href="css/load1.css" class="loader-style">
<link rel="stylesheet" href="css/load2.css" class="loader-style">
<link rel="stylesheet" href="css/load3.css" class="loader-style">
<link rel="stylesheet" href="css/load4.css" class="loader-style">
<link rel="stylesheet" href="css/load5.css" class="loader-style">
<link rel="stylesheet" href="css/load6.css" class="loader-style">
<link rel="stylesheet" href="css/load7.css" class="loader-style">
<link rel="stylesheet" href="css/load8.css" class="loader-style">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {
cmd: []
};
googletag.cmd.push(function () {
googletag.defineSlot('/7346874/Hellobar-adunits/7395', [1, 1], 'div-gpt-ad-1575679877658-0').addService(
googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>

<body>
<header><a href="https://lukehaas.me/projects" class="back">&laquo; More Projects</a>
<div class="inner">
<h1>Single Element CSS Spinners</h1>
</div>
</header>
<main>
<div class="inner">
<div class="pickers"><span>BG</span><input type="color" value="#0dc5c1" id="bg-color"><span>FG</span><input
type="color" value="#ffffff" id="fg-color"></div>
<div class="load-container load1">
<div class="loader">Loading...</div><a href="#load1">&lt; View Source &gt;</a>
</div>
<div class="load-container load2">
<div class="loader">Loading...</div><a href="#load2">&lt; View Source &gt;</a>
</div>
<div class="load-container load3">
<div class="loader">Loading...</div><a href="#load3">&lt; View Source &gt;</a>
</div>
<div class="load-container load4">
<div class="loader">Loading...</div><a href="#load4">&lt; View Source &gt;</a>
</div>
<div class="load-container load5">
<div class="loader">Loading...</div><a href="#load5">&lt; View Source &gt;</a>
</div>
<div class="load-container load6">
<div class="loader">Loading...</div><a href="#load6">&lt; View Source &gt;</a>
</div>
<div class="load-container load7">
<div class="loader">Loading...</div><a href="#load7">&lt; View Source &gt;</a>
</div>
<div class="load-container load8">
<div class="loader">Loading...</div><a href="#load8">&lt; View Source &gt;</a>
</div>
</div>
<div class="social-buttons"><a href="https://twitter.com/share" data-url="https://projects.lukehaas.me/css-loaders/"
data-text="A collection of loading spinners animated with CSS" data-via="lukehaas"
class="twitter-share-button">Tweet</a>
<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script><a href="https://github.com/lukehaas/css-loaders" data-icon="octicon-star"
data-count-href="/lukehaas/css-loaders/stargazers" data-count-api="/repos/lukehaas/css-loaders#stargazers_count"
data-count-aria-label="# stargazers on GitHub" aria-label="Star lukehaas/css-loaders on GitHub"
class="github-button">Star</a>
</div><a href="https://github.com/lukehaas/css-loaders" target="_blank" class="github"><img
src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="overlay hidden"></div>
<!--really pissed off Jade can't handle vars in includes - should be able to just loop this:-->
<div id="load1" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
background: #ffffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.load1 .loader {
color: #ffffffff;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.load1 .loader:before,
.load1 .loader:after {
position: absolute;
top: 0;
content: '';
}
.load1 .loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load1 .loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
</textarea></div>
<div id="load2" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load2 .loader,
.load2 .loader:before,
.load2 .loader:after {
border-radius: 50%;
}
.load2 .loader {
color: #ffffffff;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.load2 .loader:before,
.load2 .loader:after {
position: absolute;
content: '';
}
.load2 .loader:before {
width: 5.2em;
height: 10.2em;
background: #0dc5c1ff;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.1em 5.1em;
transform-origin: 5.1em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.load2 .loader:after {
width: 5.2em;
height: 10.2em;
background: #0dc5c1ff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 4.9em;
-webkit-transform-origin: 0.1em 5.1em;
transform-origin: 0.1em 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</textarea></div>
<div id="load3" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load3 .loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffffff;
background: -moz-linear-gradient(left, #ffffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.load3 .loader:before {
width: 50%;
height: 50%;
background: #ffffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.load3 .loader:after {
background: #0dc5c1ff;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</textarea></div>
<div id="load4" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load4 .loader {
color: #ffffffff;
font-size: 20px;
margin: 100px auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
</textarea></div>
<div id="load5" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load5 .loader {
margin: 100px auto;
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffffff;
}
}
@keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffffff;
}
}
</textarea></div>
<div id="load6" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load6 .loader {
color: #ffffffff;
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</textarea></div>
<div id="load7" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load7 .loader,
.load7 .loader:before,
.load7 .loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.load7 .loader {
color: #ffffffff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.load7 .loader:before,
.load7 .loader:after {
content: '';
position: absolute;
top: 0;
}
.load7 .loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load7 .loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
</textarea></div>
<div id="load8" class="source hidden"><textarea readonly
class="markup"><div class="loader">Loading...</div></textarea><textarea readonly class="css">.load8 .loader,
.load8 .loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.load8 .loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</textarea></div>
</main>
<footer>
<div class="inner">
<div class="me clearfix"><a href="https://twitter.com/lukehaas" target="_blank" class="twitter"><img
src="images/me.jpeg" width="45" height="45" alt="Twitter pic"><span>Created by @lukehaas</span></a></div>
<script async type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CKYI55QW&amp;placement=projectslukehaasmecssloaders"
id="_carbonads_js"></script>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script/main.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-50992962-1', 'lukehaas.me');
ga('send', 'pageview');
</script>
<div id="div-gpt-ad-1575679877658-0" style="width: 1px; height: 1px;">
<script>
googletag.cmd.push(function () {
googletag.display('div-gpt-ad-1575679877658-0');
});
</script>
</div>
</body>

</html>
182 changes: 182 additions & 0 deletions script/main.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}

$("<style>").prop({ "type": "text/css", "id": id }).html(css).appendTo("head");
}

function convertHex(hex) {
hex = hex.replace('#', '');
r = parseInt(hex.substring(0, 2), 16);
g = parseInt(hex.substring(2, 4), 16);
b = parseInt(hex.substring(4, 6), 16);

result = r + ',' + g + ',' + b;
return result;
}

var hasHovered = false;
$(".coffee").on("mouseenter focus", function () {
if (hasHovered === false) {
ga('send', 'event', 'Coffee', 'hover', 'Buy me a coffee');
hasHovered = true;
}
});
});