Skip to content

Instantly share code, notes, and snippets.

@WangShuXian6

WangShuXian6/index.html

Created June 5, 2020 10:43
Show Gist options
  • Save WangShuXian6/31b31f9abe7f276b5bfc8a47526c9be9 to your computer and use it in GitHub Desktop.
Save WangShuXian6/31b31f9abe7f276b5bfc8a47526c9be9 to your computer and use it in GitHub Desktop.
Download ZIP
Infinite Loading - Pure CSS Animation #cpc-100x50
Raw
index.html
<!-- about -->
<div class="about">
<a class="bg_links social portfolio" href="https://www.rafaelalucas.com" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social dribbble" href="https://dribbble.com/rafaelalucas" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links social linkedin" href="https://www.linkedin.com/in/rafaelalucas/" target="_blank">
<span class="icon"></span>
</a>
<a class="bg_links logo"></a>
</div>
<!-- end about -->
<body class="">
<div id="area">
<span></span>
<span></span>
</div>
<p class="title">dark mode</p>
<div class="toggle">
<span class="toggleText"> off</span>
</div>
</body>
Raw
infinite-loading-pure-css-animation-cpc-100x50.markdown
Raw
script.js
/* JS only to change Background Colour :) */
var toggle = document.querySelector(".toggle"),
body = document.querySelector("body"),
toggleText = document.querySelector(".toggleText");
toggle.addEventListener("click", toggleOn);
function toggleOn() {
if (toggle.classList.contains("on")) {
toggle.classList.remove("on");
body.classList.remove("dark");
toggleText.innerHTML = "off";
} else {
toggle.classList.add("on");
body.classList.add("dark");
toggleText.innerHTML = "on";
}
}
Raw
style.scss
.about {
$cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
$transition: 0.6s $cubic;
$size: 40px;
position: fixed;
z-index: 10;
bottom: 10px;
right: 10px;
width: $size;
height: $size;
display: flex;
justify-content: flex-end;
align-items: flex-end;
transition: all 0.2s ease;
.bg_links {
width: $size;
height: $size;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(#000000, 0.2);
border-radius: 100%;
backdrop-filter: blur(5px);
position: absolute;
}
.logo {
width: $size;
height: $size;
z-index: 9;
background-image: url(https://rafaelavlucas.github.io/assets/codepen/logo_white.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: 10px 7px;
opacity: 0.9;
transition: all 1s 0.2s ease;
bottom: 0;
right: 0;
}
.social {
opacity: 0;
right: 0;
bottom: 0;
.icon {
width: 100%;
height: 100%;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
display: flex;
transition: all 0.2s ease, background-color 0.4s ease;
opacity: 0;
border-radius: 100%;
}
&.portfolio {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/link.svg);
}
}
&.dribbble {
transition: all 0.3s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/dribbble.svg);
}
}
&.linkedin {
transition: all 0.8s ease;
.icon {
background-image: url(https://rafaelavlucas.github.io/assets/codepen/linkedin.svg);
}
}
}
&:hover {
width: 105px;
height: 105px;
transition: all $transition;
.logo {
opacity: 1;
transition: all 0.6s ease;
}
.social {
opacity: 1;
.icon {
opacity: 0.9;
}
&:hover {
background-size: 28px;
.icon {
background-size: 65%;
opacity: 1;
}
}
&.portfolio {
right: 0;
bottom: calc(100% - 40px);
transition: all 0.3s 0s $cubic;
.icon {
&:hover {
background-color: #698fb7;
}
}
}
&.dribbble {
bottom: 45%;
right: 45%;
transition: all 0.3s 0.15s $cubic;
.icon {
&:hover {
background-color: #ea4c89;
}
}
}
&.linkedin {
bottom: 0;
right: calc(100% - 40px);
transition: all 0.3s 0.25s $cubic;
.icon {
&:hover {
background-color: #0077b5;
}
}
}
}
}
}
$c-01: #93eee4;
$c-02: #52e2d9;
$c-03: #4ebdc2;
$c-04: #f74f8c;
$c-05: #d53d70;
$bg-01: #242635;
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
$font:'Abel', sans-serif;;
body {
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
transition: all 0.4s ease;
font-family: $font;
&.dark {
background-color:#242635;
}
}
#area {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 50px;
//border: 1px solid black;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
span {
position: absolute;
animation: loading 2s linear infinite;
border-radius: 100px;
left: 50%;
width:0;
transform: translateX(-50%);
background-color: $c-01;
@keyframes loading {
0% {
width: 50%;
height: 10px;
left: 50%;
background-color: $c-01;
z-index:-1;
box-shadow: 0px 5px 10px -2px $c-01;
}
20% {
width: 10px;
height: 10px;
left:0;
background-color: $c-02;
z-index:-1;
box-shadow: 0px 5px 10px -2px $c-02;
}
30% {
width: 10px;
height: 20px;
left:0;
background-color: $c-03;
z-index:2;
box-shadow: 0px 10px 20px -2px $c-03;
}
40% {
width: 30px;
height: 30px;
background-color: $c-04;
z-index:2;
box-shadow: 0px 10px 30px -5px $c-04;
}
50% {
width: 50px;
height: 50px;
background-color: $c-05;
z-index:2;
box-shadow: 0px 10px 30px -5px $c-05;
}
60% {
width: 30px;
height: 30px;
background-color: $c-04;
z-index:2;
box-shadow: 0px 10px 30px -5px $c-04;
}
70% {
width: 10px;
height: 20px;
left: 100%;
background-color: $c-03;
z-index:2;
box-shadow: 0px 10px 20px -2px $c-03;
}
80% {
width: 10px;
height: 10px;
left: 100%;
background-color: $c-02;
z-index:-1;
box-shadow: 0px 5px 10px -2px $c-02;
}
100% {
width: 50%;
height: 10px;
left: 50%;
background-color: $c-01;
z-index:-1;
box-shadow: 0px 5px 10px -2px $c-01;
}
}
&:nth-of-type(2) {
//background-color: green;
animation-delay: 1s;
//animation-duration: 1.5s;
}
}
}
.title {
color: $c-05;
margin-top: 20px;
}
.toggle {
width: 60px;
height: 30px;
background-color: #f6f6f6;
position: absolute;
top: 50px;
border-radius: 100px;
display: flex;
align-items: center;;
cursor: pointer;
box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.05);
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
&:before {
position: absolute;
height: 24px;
width: 24px;
left: 3px;
content:'';
background-color: white;
border-radius: 100%;
transition: all 0.4s ease;
right: initial;
box-shadow: 2px 0px 3px 0px rgba(0,0,0,0.2);
z-index:2;
}
.toggleText {
font-family: serif;
left: 55%;
position: absolute;
text-transform: uppercase;
font-family: $font;
font-size: 12px;
opacity: 0.3;
transition: all 0.4s ease;
}
&.on {
&:before {
background-color: $c-05;
box-shadow: -2px 0px 3px 0px rgba(0,0,0,0.2);
transition: all 0.4s ease;
left: calc(100% - 24px - 3px);
}
.toggleText {
left: 20%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment