diff --git a/bigbluebutton-html5/imports/ui/components/loader/component.jsx b/bigbluebutton-html5/imports/ui/components/loader/component.jsx new file mode 100644 index 0000000000000000000000000000000000000000..13d608bd42ddcbade4006c1562de439fecc96db1 --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/loader/component.jsx @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import styles from './styles.scss'; + +class Loader extends Component { + render() { + return ( + <div className={styles.background}> + <div className={styles.spinner}> + <div className={styles.bounce1}></div> + <div className={styles.bounce2}></div> + <div className={styles.bounce3}></div> + </div> + </div> + ); + } +} +export default Loader; diff --git a/bigbluebutton-html5/imports/ui/components/loader/styles.scss b/bigbluebutton-html5/imports/ui/components/loader/styles.scss new file mode 100644 index 0000000000000000000000000000000000000000..c3825f1e59e425698397bd2c694c2553a3c0861a --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/loader/styles.scss @@ -0,0 +1,60 @@ +@import '../../stylesheets/variables/palette'; + +/* Variables + * ========== + */ +$loader-bg: $color-gray-dark; +$loader-bullet: $color-white; + +.background { + position: fixed; + display: flex; + flex-flow: column; + justify-content: center; + width: 100%; + height: 100%; + background-color: $loader-bg; +} + +.spinner { + width: 100%; + text-align: center; + height: 22px; +} + +.spinner > div { + width: 18px; + height: 18px; + margin: 0 5px; + background-color: $loader-bullet; + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} diff --git a/bigbluebutton-html5/imports/ui/components/polling/styles.scss b/bigbluebutton-html5/imports/ui/components/polling/styles.scss new file mode 100755 index 0000000000000000000000000000000000000000..99cafd24ceceda82f5021f02e2fd6cddf1bd0e4b --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/polling/styles.scss @@ -0,0 +1,29 @@ +@import "imports/ui/stylesheets/variables/_all"; + +.pollingContainer { + order: 2; + width: 100%; + margin-top: 1%; + margin-bottom: 1%; + display: flex; + flex-direction: row; + justify-content: center; +} + +.pollingButton { + width: 100%; + height: 100%; +} + +.pollingTitle { + color: $color-white; +} + +.hidden { + display: none; +} + +.pollButtonWrapper { + text-align: center; + max-width: 150px; +}