andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
snippets/bouncing-loader.md
View File

@ -47,45 +47,6 @@ Creates a bouncing loader animation.
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.snippet-demo__bouncing-loader {
display: flex;
justify-content: center;
}
.snippet-demo__bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.snippet-demo__bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.snippet-demo__bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
</style>
#### Explanation
Note: `1rem` is usually `16px`.