# Loading Cat
<hr>
## [](//fb.me/rplus.tw)
<h2>Test</h2>
Rplus
<br>
<small style="display: block; text-align: right; font-size: 2.5vmin; opacity: .5">
活動： <a href="http://happydesigner.kktix.cc/events/world-loading-cat-championship">天下一預載貓武鬥會</a>
</small>
<style>
.center {
text-align: center;
}
.rect.rect {
border: .125em solid rgba(255,255,255,.5);
padding: .25em;
}
</style>
---
<img src="https://d13yacurqjgara.cloudfront.net/users/160117/screenshots/3197970/main.gif" style="max-height: 40vh">
> * [FB 討論串](https://www.facebook.com/groups/f2e.tw/permalink/1180443255326371/)
> * source:
> [Domaso](https://dribbble.com/domaso)’s dribbble: [Loading cat](https://dribbble.com/shots/3197970-Loading-cat)
---
<table>
<tr>
<td>
<a href="http://codepen.io/Rplus/pen/PWZYRM">
<img src="https://images.weserv.nl/?url=i.imgur.com/fEVM3QU.png&w=200">
<br>
[CSS] Cat loader
</a>
</td>
<td>
<a href="http://codepen.io/Rplus/pen/oBxLQK">
<img src="https://images.weserv.nl/?url=i.imgur.com/uw3mbv1.png&w=200">
<br>
pure CSS cat loader
</a>
</td>
</tr>
<tr>
<td>
<a href="http://codepen.io/Rplus/pen/apZVVY">
<img src="https://images.weserv.nl/?url=i.imgur.com/31cWWQa.png&w=200">
<br>
CSS Loader prototype
</a>
</td>
<td>
<a href="http://codepen.io/RplusTW/pen/qRNgdb">
<img src="https://images.weserv.nl/?url=i.imgur.com/xbGOBgt.png&w=200">
<br>
SVG Arc Path animation practice
</a>
</td>
</tr>
</table>
---
## HTML 元素變形限制
<hr>
目前只能依 <span class="rect">矩形</span> 做變形
---
---
---
---
---
     
---
### Cat Body + Box-Shadow
```scss
.loader::before {
border-radius: 50%;
box-shadow:
inset 0 0 0 1 * $unit,
inset 0 0 0 2.5 * $unit $cat-c2,
inset 0 0 0 5.5 * $unit $cat-c1,
inset 0 0 0 7 * $unit $cat-c2,
inset 0 0 0 8 * $unit;
}
```
---
# Helf Circle:
## OVERFLOW ?<!-- .element: class="fragment" data-fragment-index="1" -->
/<!-- .element: class="fragment" data-fragment-index="2" -->
## CLIP ?<!-- .element: class="fragment" data-fragment-index="2" -->
---
## OVERFLOW
<hr>
> 需要額外的 `DOM` 來裁切出半圓，
> 不然超出的頭尾會被切掉
---
## Clip
<hr>
```scss
.loader::before {
clip: rect(0, $box-size, ($box-size / 2), 0);
}
```
---
<iframe height='500' scrolling='no' title='CSS Loader prototype' src='//codepen.io/Rplus/embed/apZVVY/?height=486&theme-id=dark&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/Rplus/pen/apZVVY/'>CSS Loader prototype</a> by Rplus (<a href='http://codepen.io/Rplus'>@Rplus</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>
---
## 感謝~
by Rplus
{"metaMigratedAt":"2023-06-14T12:23:39.854Z","metaMigratedFrom":"Content","title":"Loading Cat","breaks":true,"contributors":"[]"}