diff --git a/submissions/docs/ease-btn-loading/README.md b/submissions/docs/ease-btn-loading/README.md new file mode 100644 index 0000000000..c2da200b48 --- /dev/null +++ b/submissions/docs/ease-btn-loading/README.md @@ -0,0 +1,12 @@ +# ease-btn-loading Spinner Fix + +This submission adds a visible spinner animation to the `ease-btn-loading` state. +Previously, the loading button looked disabled but had no visual feedback. + +## Usage + +```html + diff --git a/submissions/docs/ease-btn-loading/demo.html b/submissions/docs/ease-btn-loading/demo.html new file mode 100644 index 0000000000..e2a093e22f --- /dev/null +++ b/submissions/docs/ease-btn-loading/demo.html @@ -0,0 +1,14 @@ + + + + + EaseMotion Loading Button Demo + + + + + + diff --git a/submissions/docs/ease-btn-loading/style.css b/submissions/docs/ease-btn-loading/style.css new file mode 100644 index 0000000000..15a82028b7 --- /dev/null +++ b/submissions/docs/ease-btn-loading/style.css @@ -0,0 +1,22 @@ +.ease-btn-loading { + position: relative; + display: inline-flex; + align-items: center; + gap: 0.5rem; + opacity: 0.8; + cursor: not-allowed; +} + +.spinner { + width: 16px; + height: 16px; + border: 2px solid #fff; + border-top: 2px solid transparent; + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +}