aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-10-31 08:41:46 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-10-31 08:41:46 +0100
commitb7a485121d71c95fcf5e432e4cc745cf91af4f93 (patch)
treeb376665f83016b5712bfcd91ffd06995bcc9afa7
parent2de96f4d6b800076743ed2073f9529816cfd5c8a (diff)
downloadPeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.tar.gz
PeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.tar.zst
PeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.zip
Change video spinner
-rw-r--r--client/src/sass/video-js-custom.scss72
1 files changed, 72 insertions, 0 deletions
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 4e3aceaab..c5f668f17 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -331,3 +331,75 @@ $slider-bg-color: lighten($primary-background-color, 33%);
331 width: 3em; 331 width: 3em;
332 height: auto; 332 height: auto;
333} 333}
334
335// Thanks: https://projects.lukehaas.me/css-loaders/
336.vjs-loading-spinner {
337 border: none;
338 opacity: 1;
339 font-size: 10px;
340 text-indent: -9999em;
341 width: 5em;
342 height: 5em;
343 border-radius: 50%;
344 background: #ffffff;
345 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
346 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
347 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
348 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
349 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
350 position: relative;
351 -webkit-animation: load3 1.4s infinite linear;
352 animation: load3 1.4s infinite linear;
353 -webkit-transform: translateZ(0);
354 -ms-transform: translateZ(0);
355 transform: translateZ(0);
356
357 &:before {
358 width: 50%;
359 height: 50%;
360 background: #ffffff;
361 border-radius: 100% 0 0 0;
362 position: absolute;
363 top: 0;
364 left: 0;
365 content: '';
366 animation: none !important;
367 margin: 0 !important;
368 }
369
370 &:after {
371 background: #000;
372 width: 75%;
373 height: 75%;
374 border-radius: 50%;
375 content: '';
376 margin: auto;
377 position: absolute;
378 top: 0;
379 left: 0;
380 bottom: 0;
381 right: 0;
382 animation: none !important;
383 }
384
385 @-webkit-keyframes load3 {
386 0% {
387 -webkit-transform: rotate(0deg);
388 transform: rotate(0deg);
389 }
390 100% {
391 -webkit-transform: rotate(360deg);
392 transform: rotate(360deg);
393 }
394 }
395 @keyframes load3 {
396 0% {
397 -webkit-transform: rotate(0deg);
398 transform: rotate(0deg);
399 }
400 100% {
401 -webkit-transform: rotate(360deg);
402 transform: rotate(360deg);
403 }
404 }
405}