123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- /**
- * @file
- * Throbber.
- */
- .ajax-progress {
- display: inline-flex;
- align-items: center;
- padding: 0;
- height: 100%;
- margin: 0;
- }
- .ajax-progress-throbber .throbber {
- border-radius: 100%;
- width: 24px;
- height: 24px;
- border-top: 3px solid rgba(0,128,255, 0.3);
- border-right: 3px solid rgba(0,128,255, 0.3);
- border-bottom: 3px solid rgba(0,128,255, 0.3);
- border-left: 3px solid #0678be;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load 0.7s infinite linear;
- animation: load 0.7s infinite linear;
- padding: 0;
- margin-right: 6px;
- }
- .ajax-progress-throbber .message {
- display: none;
- }
- tr .ajax-progress-throbber .throbber {
- margin: 0 10px;
- }
- .ajax-progress-bar {
- width: 18px;
- }
- /* Full screen throbber */
- .ajax-progress-fullscreen {
- left: 0;
- position: fixed;
- top: 0;
- z-index: 1000;
- height: 100%;
- padding: 0;
- width: 100%;
- }
- .ajax-progress-fullscreen::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -15px;
- margin-left: -15px;
- width: 20px;
- height: 20px;
- border-radius: 100%;
- border-top: 5px solid rgba(0,128,255, 0.3);
- border-right: 5px solid rgba(0,128,255, 0.3);
- border-bottom: 5px solid rgba(0,128,255, 0.3);
- border-left: 5px solid #0678be;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load 0.7s infinite linear;
- animation: load 0.7s infinite linear;
- z-index: 9999;
- }
- [dir="rtl"] .ajax-progress-fullscreen {
- left: auto;
- right: 49%;
- }
- /* keyframes animation */
- @-webkit-keyframes load {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes load {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
|