| @-webkit-keyframes v-rotate-360 { |
| to {-webkit-transform: rotate(360deg);} |
| } |
| @-moz-keyframes v-rotate-360 { |
| to {-moz-transform: rotate(360deg);} |
| } |
| @-o-keyframes v-rotate-360 { |
| to {-o-transform: rotate(360deg);} |
| } |
| @keyframes v-rotate-360 { |
| to {transform: rotate(360deg);} |
| } |
| |
| /** |
| * Creates a spinner to be used as a loading indicator. On browsers which do not |
| * support CSS animations, an animated GIF image is used as a fallback. |
| * |
| * @param {size} $size (24px) - the diameter of the spinner, in pixels. Should be divisible by 2, increased by 1px if not |
| * @param {size} $thickness (2px) - the thickness or width of the border of the spinner |
| * @param {color} $color ($v-focus-color) - the color of the border of the spinner |
| * @param {time} $speed (500ms) - the speed of the spinning animation |
| */ |
| @mixin valo-spinner ($size: 24px, $thickness: 2px, $color: $v-focus-color, $speed: 500ms) { |
| // Make size divisible by 2, so that the rotation won't jiggle |
| $size: round($size) + round($size) % 2; |
| height: $size !important; |
| width: $size !important; |
| @include box-sizing(border-box); |
| border: $thickness solid transparentize($color, .8); |
| border-top-color: $color; |
| border-right-color: $color; |
| border-radius: 100%; |
| @include animation(v-rotate-360 $speed infinite linear); |
| pointer-events: none; |
| |
| // No CSS animation in IE8 and IE9 |
| .v-ie8 &, |
| .v-ie9 & { |
| border: none; |
| border-radius: $v-border-radius; |
| background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50% 50%; |
| background-size: 80%; |
| } |
| |
| // No background-size for IE8 |
| .v-ie8 & { |
| min-width: 30px; |
| min-height: 30px; |
| } |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| /** |
| * The color of the main loading indicator bar. |
| * @type color |
| */ |
| $v-loading-indicator-color: $v-focus-color !default; |
| |
| /** |
| * The height of the main loading indicator bar. |
| * |
| * @type size |
| */ |
| $v-loading-indicator-bar-height: ceil($v-unit-size/10) !default; |
| |
| /** |
| * The height of the main loading indicator bar when the request to the server |
| * is taking longer than usual and the user is notified that they should wait. |
| * |
| * @type size |
| */ |
| $v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; |
| |
| |
| |
| @include keyframes(v-progress-start) { |
| 0% { width: 0%; } |
| 100% { width: 50%; } |
| } |
| |
| @include keyframes(v-progress-delay) { |
| 0% { width: 50%; } |
| 100% { width: 90%; } |
| } |
| |
| @include keyframes(v-progress-wait) { |
| 0% { width: 90%; height: $v-loading-indicator-bar-height; } |
| 3% { width: 91%; height: $v-loading-indicator-bar-height--wait; } |
| 100% { width: 96%; height: $v-loading-indicator-bar-height--wait; } |
| } |
| |
| @include keyframes(v-progress-wait-pulse) { |
| 0% { opacity: 1; } |
| 50% { opacity: .1; } |
| 100% { opacity: 1; } |
| } |
| |
| |
| /* |
| * Outputs the necessary styles to create the main loading indicator bar. |
| * |
| * @access private |
| */ |
| @mixin valo-loading-bar { |
| |
| .v-loading-indicator { |
| position: fixed !important; |
| z-index: 99999; |
| left: 0; |
| right: auto; |
| top: 0; |
| width: 50%; |
| opacity: 1; |
| height: $v-loading-indicator-bar-height; |
| background-color: $v-loading-indicator-color; |
| //@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%); |
| pointer-events: none; |
| |
| @include transition(none); |
| @include animation(v-progress-start 1000ms 200ms both); |
| //@include animation-fill-mode(forwards); |
| |
| &[style*="none"] { |
| // Chrome skips the transitions because it thinks the element is display: none; |
| display: block !important; |
| width: 100% !important; |
| opacity: 0; |
| @include animation(none); |
| @include transition(opacity 500ms 300ms, width 300ms); |
| } |
| } |
| |
| .v-loading-indicator-delay { |
| width: 90%; |
| .v-ff & { |
| width: 50%; |
| } |
| @include animation(v-progress-delay 3.8s forwards); |
| } |
| |
| .v-loading-indicator-wait { |
| width: 96%; |
| .v-ff & { |
| width: 90%; |
| } |
| @include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards); |
| } |
| |
| } |