Subversion Repositories oidplus

Rev

View as "text/css" | Blame | Last modification | View Log | RSS feed

  1. /* Absolute Center Spinner */
  2. #loading {
  3.   position: fixed;
  4.   z-index: 999;
  5.   overflow: show;
  6.   margin: auto;
  7.   top: 0;
  8.   left: 0;
  9.   bottom: 0;
  10.   right: 0;
  11.   width: 50px;
  12.   height: 50px;
  13. }
  14.  
  15. /* Transparent Overlay */
  16. #loading:before {
  17.   content: '';
  18.   display: block;
  19.   position: fixed;
  20.   top: 0;
  21.   left: 0;
  22.   width: 100%;
  23.   height: 100%;
  24.   background-color: rgba(255,255,255,0.5);
  25. }
  26.  
  27. /* :not(:required) hides these rules from IE9 and below */
  28. #loading:not(:required) {
  29.   /* hide "loading..." text */
  30.   font: 0/0 a;
  31.   color: transparent;
  32.   text-shadow: none;
  33.   background-color: transparent;
  34.   border: 0;
  35. }
  36.  
  37. #loading:not(:required):after {
  38.   content: '';
  39.   display: block;
  40.   font-size: 10px;
  41.   width: 50px;
  42.   height: 50px;
  43.   margin-top: -0.5em;
  44.  
  45.   border: 15px solid rgba(33, 150, 243, 1.0);
  46.   border-radius: 100%;
  47.   border-bottom-color: transparent;
  48.   -webkit-animation: spinner 1s linear 0s infinite;
  49.   animation: spinner 1s linear 0s infinite;
  50.  
  51.  
  52. }
  53.  
  54. /* Animation */
  55.  
  56. @-webkit-keyframes spinner {
  57.   0% {
  58.     -webkit-transform: rotate(0deg);
  59.     -moz-transform: rotate(0deg);
  60.     -ms-transform: rotate(0deg);
  61.     -o-transform: rotate(0deg);
  62.     transform: rotate(0deg);
  63.   }
  64.   100% {
  65.     -webkit-transform: rotate(360deg);
  66.     -moz-transform: rotate(360deg);
  67.     -ms-transform: rotate(360deg);
  68.     -o-transform: rotate(360deg);
  69.     transform: rotate(360deg);
  70.   }
  71. }
  72. @-moz-keyframes spinner {
  73.   0% {
  74.     -webkit-transform: rotate(0deg);
  75.     -moz-transform: rotate(0deg);
  76.     -ms-transform: rotate(0deg);
  77.     -o-transform: rotate(0deg);
  78.     transform: rotate(0deg);
  79.   }
  80.   100% {
  81.     -webkit-transform: rotate(360deg);
  82.     -moz-transform: rotate(360deg);
  83.     -ms-transform: rotate(360deg);
  84.     -o-transform: rotate(360deg);
  85.     transform: rotate(360deg);
  86.   }
  87. }
  88. @-o-keyframes spinner {
  89.   0% {
  90.     -webkit-transform: rotate(0deg);
  91.     -moz-transform: rotate(0deg);
  92.     -ms-transform: rotate(0deg);
  93.     -o-transform: rotate(0deg);
  94.     transform: rotate(0deg);
  95.   }
  96.   100% {
  97.     -webkit-transform: rotate(360deg);
  98.     -moz-transform: rotate(360deg);
  99.     -ms-transform: rotate(360deg);
  100.     -o-transform: rotate(360deg);
  101.     transform: rotate(360deg);
  102.   }
  103. }
  104. @keyframes spinner {
  105.   0% {
  106.     -webkit-transform: rotate(0deg);
  107.     -moz-transform: rotate(0deg);
  108.     -ms-transform: rotate(0deg);
  109.     -o-transform: rotate(0deg);
  110.     transform: rotate(0deg);
  111.   }
  112.   100% {
  113.     -webkit-transform: rotate(360deg);
  114.     -moz-transform: rotate(360deg);
  115.     -ms-transform: rotate(360deg);
  116.     -o-transform: rotate(360deg);
  117.     transform: rotate(360deg);
  118.   }
  119. }
  120.  
  121.