diff options
Diffstat (limited to 'static/css/main.css')
| -rw-r--r-- | static/css/main.css | 106 |
1 files changed, 85 insertions, 21 deletions
diff --git a/static/css/main.css b/static/css/main.css index 42fc0ed..ca70e63 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -500,6 +500,7 @@ footer::before { .upload-area { position: relative; + overflow: hidden; } .upload-drag-box { @@ -508,37 +509,100 @@ footer::before { .upload-loading-indicator { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 0; + left: 0; + width: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; - background: rgba(26, 0, 51, 0.55); + background: #1a0033cc; + box-shadow: none; + transition: none; z-index: 20; pointer-events: none; } -.upload-loading-icon { - font-size: 2.5em; - color: #ff99cc; - filter: drop-shadow(0 0 8px #ff99cc88); - animation: uploadspin 1.2s linear infinite; +.ib-loader-spinner { + position: relative; + width: 32px; + height: 32px; } -.upload-loading-icon { - font-size: 3em; - color: #ff99cc; - filter: drop-shadow(0 0 8px #ff99cc88); - animation: uploadspin 1.2s linear infinite; +.ib-loader-seg { + position: absolute; + width: 7px; + height: 7px; + background: #222244; + border: 1px solid #fff; + border-radius: 1px; + opacity: 0.35; + box-shadow: none; + transition: opacity 0.1s, background 0.1s; } -@keyframes uploadspin { - 0% { - transform: rotate(0deg); - } +.ib-loader-seg.active { + opacity: 1; + background: #ff99cc; + box-shadow: 0 0 2px 0 #99ccff; +} + +.ib-loader-seg:nth-child(1) { + top: 0px; + left: 12px; +} + +.ib-loader-seg:nth-child(2) { + top: 3px; + left: 19px; +} + +.ib-loader-seg:nth-child(3) { + top: 8px; + left: 24px; +} + +.ib-loader-seg:nth-child(4) { + top: 15px; + left: 27px; +} + +.ib-loader-seg:nth-child(5) { + top: 22px; + left: 24px; +} + +.ib-loader-seg:nth-child(6) { + top: 27px; + left: 19px; +} + +.ib-loader-seg:nth-child(7) { + top: 30px; + left: 12px; +} + +.ib-loader-seg:nth-child(8) { + top: 27px; + left: 5px; +} + +.ib-loader-seg:nth-child(9) { + top: 22px; + left: 0px; +} + +.ib-loader-seg:nth-child(10) { + top: 15px; + left: -3px; +} + +.ib-loader-seg:nth-child(11) { + top: 8px; + left: 0px; +} - 100% { - transform: rotate(360deg); - } +.ib-loader-seg:nth-child(12) { + top: 3px; + left: 5px; }
\ No newline at end of file |
