diff options
| author | silverwind <me@silverwind.io> | 2020-08-04 21:56:37 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-08-04 20:56:37 +0100 |
| commit | e61c09ed7331e6ea72e4d9f08c0490713598942d (patch) | |
| tree | febdc85a173312afbf293304a3c46dfe498c7725 /web_src/less/features | |
| parent | 5e5c893555411bcbeedc4a3f0d853731b63f05c4 (diff) | |
| download | gitea-e61c09ed7331e6ea72e4d9f08c0490713598942d.tar.gz gitea-e61c09ed7331e6ea72e4d9f08c0490713598942d.zip | |
Add loading spinners and mermaid error handling (#12358)
- Add loading spinners on editor and mermaid renderers
- Add error handling and inline error box for mermaid
- Fix Mermaid rendering by using the .init api
Diffstat (limited to 'web_src/less/features')
| -rw-r--r-- | web_src/less/features/animations.less | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less new file mode 100644 index 0000000000..65ff1fef3f --- /dev/null +++ b/web_src/less/features/animations.less @@ -0,0 +1,34 @@ +@keyframes isloadingspin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +.is-loading { + background: transparent !important; + color: transparent !important; + border: transparent !important; + pointer-events: none !important; + position: relative !important; + overflow: hidden !important; +} + +.is-loading:after { + content: ""; + position: absolute; + display: block; + width: 4rem; + height: 4rem; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + animation: isloadingspin 500ms infinite linear; + border-width: 4px; + border-style: solid; + border-color: #ececec #ececec #666 #666; + border-radius: 100%; +} + +.markdown pre.is-loading, +.editor-loading.is-loading { + height: 12rem; +} |