.loading { position: absolute; z-index: 999; height: 1.5em; width: 1.5em; overflow: show; margin: auto; top: 50%; } .loading.ar { left: 30px; } .loading.en { right: 30px; } .loading:not(:required):after { content: ''; display: block; font-size: 8px; width: 0.8em; height: 0.8em; margin-top: -0.4em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.4em; -webkit-box-shadow: rgb(0, 255, 0, 0.99) 1.35em 0 0 0, rgba(0, 255, 0, 0.95) 0.99em 0.99em 0 0, rgba(0, 255, 0, 0.85) 0 1.35em 0 0, rgba(0, 255, 0, 0.80) -0.99em 0.99em 0 0, rgba(0, 255, 0, 0.70) -1.35em 0 0 0, rgba(0, 255, 0, 0.65) -0.99em -0.99em 0 0, rgba(0, 255, 0, 0.55) 0 -1.35em 0 0, rgba(0, 255, 0, 0.50) 0.99em -0.99em 0 0; box-shadow: rgb(0, 255, 0, 0.99) 1.35em 0 0 0, rgba(0, 255, 0, 0.95) 0.99em 0.99em 0 0, rgba(0, 255, 0, 0.85) 0 1.35em 0 0, rgba(0, 255, 0, 0.80) -0.99em 0.99em 0 0, rgba(0, 255, 0, 0.70) -1.35em 0 0 0, rgba(0, 255, 0, 0.65) -0.99em -0.99em 0 0, rgba(0, 255, 0, 0.55) 0 -1.35em 0 0, rgba(0, 255, 0, 0.50) 0.99em -0.99em 0 0; } .loadingFull { position: fixed; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } .loadingFull:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.30); } .loadingFull:not(:required), .loading:not(:required) { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .loadingFull:not(:required):after { content: ''; display: block; font-size: 8px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgb(0, 255, 0, 0.99) 1.5em 0 0 0, rgba(0, 255, 0, 0.95) 1.1em 1.1em 0 0, rgba(0, 255, 0, 0.85) 0 1.5em 0 0, rgba(0, 255, 0, 0.80) -1.1em 1.1em 0 0, rgba(0, 255, 0, 0.70) -1.5em 0 0 0, rgba(0, 255, 0, 0.65) -1.1em -1.1em 0 0, rgba(0, 255, 0, 0.55) 0 -1.5em 0 0, rgba(0, 255, 0, 0.50) 1.1em -1.1em 0 0; box-shadow: rgb(0, 255, 0, 0.99) 1.5em 0 0 0, rgba(0, 255, 0, 0.95) 1.1em 1.1em 0 0, rgba(0, 255, 0, 0.85) 0 1.5em 0 0, rgba(0, 255, 0, 0.80) -1.1em 1.1em 0 0, rgba(0, 255, 0, 0.70) -1.5em 0 0 0, rgba(0, 255, 0, 0.65) -1.1em -1.1em 0 0, rgba(0, 255, 0, 0.55) 0 -1.5em 0 0, rgba(0, 255, 0, 0.50) 1.1em -1.1em 0 0; } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }