From 7ae6226a2fa6950e7254668918785c83a213a014 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Tue, 20 Apr 2021 20:09:11 +1000 Subject: [PATCH] Loader for extension popup Pretty sure this isn't going to do anything at all --- .gitignore | 1 + crabfit-browser-extension/manifest.json | 2 +- crabfit-browser-extension/popup.html | 37 +++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index cfc9619..6e56161 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /graphics .DS_Store +/crabfit-browser-extension/*.zip diff --git a/crabfit-browser-extension/manifest.json b/crabfit-browser-extension/manifest.json index 6bcae9b..ed47952 100644 --- a/crabfit-browser-extension/manifest.json +++ b/crabfit-browser-extension/manifest.json @@ -1,7 +1,7 @@ { "name": "Crab Fit", "description": "Enter your availability to find a time that works for everyone!", - "version": "1.0", + "version": "1.1", "manifest_version": 2, "author": "Ben Grant", diff --git a/crabfit-browser-extension/popup.html b/crabfit-browser-extension/popup.html index d922600..e1609df 100644 --- a/crabfit-browser-extension/popup.html +++ b/crabfit-browser-extension/popup.html @@ -9,6 +9,42 @@ margin: 0; } + @keyframes load { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + #loader { + position: absolute; + top: 0; + left: 0; + width: 360px; + height: 500px; + background-color: #FFFFFF; + z-index: -1; + } + #loader::after { + content: ''; + position: absolute; + top: calc(50% - 15px); + left: calc(50% - 15px); + height: 24px; + width: 24px; + border: 3px solid #F79E00; + border-left-color: transparent; + border-radius: 100px; + animation: load .5s linear infinite; + } + @media (prefers-color-scheme: dark) { + #loader { + background-color: #111111; + } + } + iframe { height: 100%; width: 100%; @@ -17,6 +53,7 @@ +