Skip to content

Instantly share code, notes, and snippets.

View JonathanDn's full-sized avatar
💭
Building Reusable Vue Components

Yonatan Doron JonathanDn

💭
Building Reusable Vue Components
106 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / pulses.html
Created March 23, 2018 11:26
SCSS - pulsing waves circles WIP - demo --> https://jsfiddle.net/zzLejgwu/55/
<div class="circle-container">
<div id="circle" class="circle">
<div class="pulsating-ring"></div>
<div class="pulsating-ring-two"></div>
<div class="pulsating-ring-three"></div>
</div>
</div>
@JonathanDn
JonathanDn / max-min.html
Last active September 8, 2018 13:24
SCSS Animated Maximize to Minimize button and back with VanillaJS, SCSS - demo --> https://jsfiddle.net/y9waeLxg/51/
<div class="window-control-container">
<div id="minimize" class="minimize">
<div class="bottom-bar"></div>
<div class="top-bar"></div>
<div class="left-bar"></div>
<div class="right-bar"></div>
</div>
</div>
@JonathanDn
JonathanDn / mute-btn.html
Last active March 22, 2018 14:33
SCSS - animated mute button - active / disabled - demo --> https://jsfiddle.net/n6hvfLda/121/
<div class="canvas">
<div id="mute" class="mute-btn">
<div class="square"></div>
<div class="triangle-container">
<div class="triangle">
<div class="triangle-clone-border"></div>
</div>
</div>
@JonathanDn
JonathanDn / mute.html
Created March 22, 2018 10:31
pure SCSS - active mute button - demo --> https://jsfiddle.net/n6hvfLda/49/
<div class="canvas">
<div class="mute-btn">
<div class="square"></div>
<div class="triangle-container">
<div class="triangle">
<div class="triangle-clone-border"></div>
</div>
</div>
<div class="sound-waves">
<div class="wave-1"></div>
@JonathanDn
JonathanDn / rotate-card.html
Created March 21, 2018 18:51
CSS - rotating card on hover - demo --> https://jsfiddle.net/tn01wdyq/29/
<div class="card-container">
<class id="card" class="card no-animation">
<span id="text" class="text no-animation">Hover Me</span>
</class>
</div>
@JonathanDn
JonathanDn / burger.css
Last active March 21, 2018 17:33
CSS - animated burger-icon to X icon with vanilla JS & pure CSS - DEMO --> https://jsfiddle.net/L11kq8oh/79/
.canvas {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background-color: #3FAF82;
}
.burger-icon {
@JonathanDn
JonathanDn / donut.css
Last active March 20, 2018 22:09
CSS - futuristic complex donut loader - demo --> https://jsfiddle.net/wk2w64v6/23/
@keyframes donut-spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes donut-spin-reverse {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}
@keyframes fade {
0% {opacity: 1;}
@JonathanDn
JonathanDn / donut.css
Created March 20, 2018 10:16
CSS Donut Spinner - indication of loading
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
@JonathanDn
JonathanDn / three_dot_loader.css
Last active March 15, 2018 20:43
A three circles bounding, opacity shifting loader - JS, CSS --> demo https://jsfiddle.net/mt50h0ca/6/
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0)
}
to {
opacity: 0.1;
transform: translateY(-16px)
}
}
@JonathanDn
JonathanDn / responsive-table.html
Last active January 21, 2018 08:23
Responsive Table - vertical expand, built with pure css flexbox --> codepen: https://codepen.io/anon/pen/zpejXw
<div class="table-container">
<div class="table">
<div class="table-head">
<div class="table-row">
<div class="head-mobile">head 1</div>
<div class="head-mobile">head 2</div>
<div class="head-mobile">head 3</div>
<div class="head">head 4</div>
<div class="head">head 5</div>
<div class="head">head 6</div>