diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-10-31 08:41:46 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-10-31 08:41:46 +0100 |
commit | b7a485121d71c95fcf5e432e4cc745cf91af4f93 (patch) | |
tree | b376665f83016b5712bfcd91ffd06995bcc9afa7 /client | |
parent | 2de96f4d6b800076743ed2073f9529816cfd5c8a (diff) | |
download | PeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.tar.gz PeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.tar.zst PeerTube-b7a485121d71c95fcf5e432e4cc745cf91af4f93.zip |
Change video spinner
Diffstat (limited to 'client')
-rw-r--r-- | client/src/sass/video-js-custom.scss | 72 |
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 | } | ||