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

Merge pull request #18 from atomiks/donut-spinner

Browse Source 
[FEATURE] Add donut-spinner snippet
This commit is contained in:
atomiks
2018-02-28 18:25:15 +10:00
committed by GitHub
parent 506a73f175 eb5e62a9fc
commit d41e267d12
7 changed files with 1000 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/464d45b6c0aa745a9d68e563688b3354.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/6a92da93c8b31945626bd085895f2309.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

9
docs/a4a44c59f0a5b432531e0c4e83a00cf4.css Normal file
View File

File diff suppressed because one or more lines are too long

19
docs/a4a44c59f0a5b432531e0c4e83a00cf4.js Normal file
View File

File diff suppressed because one or more lines are too long

885
docs/index.html
View File

File diff suppressed because one or more lines are too long

61
index.html
View File

@ -21,6 +21,7 @@
<a class="sidebar__link" href="#clearfix">Clearfix</a>
<a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a>
<a class="sidebar__link" href="#custom-text-selection">Custom text selection</a>
<a class="sidebar__link" href="#donut-spinner">Donut spinner</a>
<a class="sidebar__link" href="#easing-variables">Easing variables</a>
<a class="sidebar__link" href="#etched-text">Etched text</a>
<a class="sidebar__link" href="#gradient-text">Gradient text</a>
@ -174,6 +175,66 @@ in any specification.</span></p>
</li>
</ul>
</div>
<div class="snippet">
<h3 id="donut-spinner">Donut spinner</h3>
<p>Creates a donut spinner that can be used to indicate the loading of content.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="donut"&gt;&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@keyframes donut-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25);
border-left-color: blue;
border-radius: 50%;
width: 20px;
height: 20px;
animation: donut-spin 1.2s linear infinite;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__donut-spinner"></div>
</div>
<style>
@keyframes snippet-demo__donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.snippet-demo__donut-spinner {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25);
border-left-color: blue;
border-radius: 50%;
width: 20px;
height: 20px;
animation: snippet-demo__donut-spin 1.2s linear infinite;
}
</style>
<h4 data-type="Explanation">Explanation</h4>
<p>Use a semi-transparent <code>border</code> for the whole element, except one side that will serve as the loading indicator for the donut. Use <code>animation</code> to rotate the element.</p>
<h4 data-type="Browser support">Browser support</h4>
<div>
<div class="snippet__browser-support">
94.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-animation" target="_blank">https://caniuse.com/#feat=css-animation</a>
</li>
<li>
<a href="https://caniuse.com/#feat=transforms2d" target="_blank">https://caniuse.com/#feat=transforms2d</a>
</li>
</ul>
</div>
<div class="snippet">
<h3 id="easing-variables">Easing variables</h3>
<p>Variables that can be reused for <code>transition-timing-function</code> properties, more powerful than the built-in <code>ease</code>, <code>ease-in</code>, <code>ease-out</code> and <code>ease-in-out</code>.</p>

61
snippets/donut-spinner.md Normal file
View File

@ -0,0 +1,61 @@
### Donut spinner
Creates a donut spinner that can be used to indicate the loading of content.
#### HTML
```html
<div class="donut"></div>
```
#### CSS
```css
@keyframes donut-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25);
border-left-color: blue;
border-radius: 50%;
width: 20px;
height: 20px;
animation: donut-spin 1.2s linear infinite;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__donut-spinner"></div>
</div>
<style>
@keyframes snippet-demo__donut-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.snippet-demo__donut-spinner {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25);
border-left-color: blue;
border-radius: 50%;
width: 20px;
height: 20px;
animation: snippet-demo__donut-spin 1.2s linear infinite;
}
</style>
#### Explanation
Use a semi-transparent `border` for the whole element, except one side that will
serve as the loading indicator for the donut. Use `animation` to rotate the element.
#### Browser support
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
* https://caniuse.com/#feat=css-animation
* https://caniuse.com/#feat=transforms2d