-
+
+
-
diff --git a/main.css b/main.css
index ac25b2d..6b50252 100644
--- a/main.css
+++ b/main.css
@@ -43,6 +43,12 @@ body {
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
+ transition: opacity .5s;
+}
+
+.gradient-border--hidden{
+ display: none;
+ opacity: 0;
}
.gradient-border:after {
@@ -71,18 +77,3 @@ body {
background-position: 0% 50%;
}
}
-
-.loader {
- border: 16px solid #f3f3f3; /* Light grey */
- border-top: 16px solid limegreen; /* Blue */
- border-radius: 50%;
- width: 50px;
- height: 50px;
- animation: spin 1s linear infinite;
- margin: 20px auto;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
diff --git a/script.js b/script.js
index 7d551a0..d1a495d 100644
--- a/script.js
+++ b/script.js
@@ -35,6 +35,12 @@ subtitle.innerText =
window.addEventListener("load", startup, false);
})();
+function swapSpinnerWithVideo(){
+ document.querySelector('.spinner').classList.add('spinner--hidden');
+ document.querySelector('.gradient-border').classList.remove('gradient-border--hidden');
+}
+
+
function startup() {
video = document.getElementById("video");
canvas = document.getElementById("canvas");
@@ -53,6 +59,8 @@ function startup() {
"canplay",
function (ev) {
if (!streaming) {
+ swapSpinnerWithVideo();
+
const width = 1024;
const height = 768;
let resultHeight =
@@ -65,9 +73,6 @@ function startup() {
resultHeight = width / (4 / 3);
} else {
subtitle.innerText = "";
- const spinner = document.querySelector(".loader");
- spinner.style.display = "none";
-
setTimeout(() => {
const random = Math.floor(
Math.random() * compliments.length
diff --git a/spinner.css b/spinner.css
new file mode 100644
index 0000000..8666651
--- /dev/null
+++ b/spinner.css
@@ -0,0 +1,84 @@
+.spinner{
+ font-family: 'Raleway';
+ color: white;
+ text-align: center;
+ transition: opacity .5s;
+}
+
+.spinner--hidden{
+ display: none;
+ opacity: 0;
+}
+
+.sk-cube-grid {
+ width: 40px;
+ height: 40px;
+ margin: 100px auto;
+}
+
+.sk-cube-grid .sk-cube {
+ width: 33%;
+ height: 33%;
+ background-color: #333;
+ float: left;
+ -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+ animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-cube-grid .sk-cube1 {
+ -webkit-animation-delay: 0.2s;
+ animation-delay: 0.2s;
+ background:#f79533; }
+.sk-cube-grid .sk-cube2 {
+ -webkit-animation-delay: 0.3s;
+ animation-delay: 0.3s;
+ background:#f37055; }
+.sk-cube-grid .sk-cube3 {
+ -webkit-animation-delay: 0.4s;
+ animation-delay: 0.4s;
+ background:#ef4e7b;
+}.sk-cube-grid .sk-cube4 {
+ -webkit-animation-delay: 0.1s;
+ animation-delay: 0.1s;
+ background:#bebc1f; }
+.sk-cube-grid .sk-cube5 {
+ -webkit-animation-delay: 0.2s;
+ animation-delay: 0.2s;
+ background:#45b16e; }
+.sk-cube-grid .sk-cube6 {
+ -webkit-animation-delay: 0.3s;
+ animation-delay: 0.3s;
+ background:#a166ab; }
+.sk-cube-grid .sk-cube7 {
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+ background:#06dabd;
+ }
+.sk-cube-grid .sk-cube8 {
+ -webkit-animation-delay: 0.1s;
+ animation-delay: 0.1s;
+ background:#0b8be0; }
+.sk-cube-grid .sk-cube9 {
+ -webkit-animation-delay: 0.2s;
+ animation-delay: 0.2s;
+ background:#5b45d6; }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+ 0%, 70%, 100% {
+ -webkit-transform: scale3D(1, 1, 1);
+ transform: scale3D(1, 1, 1);
+ } 35% {
+ -webkit-transform: scale3D(0, 0, 1);
+ transform: scale3D(0, 0, 1);
+ }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+ 0%, 70%, 100% {
+ -webkit-transform: scale3D(1, 1, 1);
+ transform: scale3D(1, 1, 1);
+ } 35% {
+ -webkit-transform: scale3D(0, 0, 1);
+ transform: scale3D(0, 0, 1);
+ }
+}
+