Loader script

Loader with translucent background

CSS
****************************************************************************


/*loader class akhilesh start*/

  .loader_class {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  margin-top: 10%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.loader_visiblity_block{
  display: none !important;
}
.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  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: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-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);
  }
}

/*loader class akhilesh end*/

JS
*******************************************************************************
$('#loading_div').addClass("loader_visiblity_block");

OR

$('#loading_div').removeClass("loader_visiblity_block");

<a href="#" class="btn btn-primary btn-lg full-width" id="illa1" >
                           <i class="fa fa-spinner fa-pulse fa-fw div_hide_class" id="loader_gif"></i>
                           <span id="save_text"> Sign in </span></a>


Depending on how you use loader html.



HTML
*******************************************************************************

 <div class="loading loader_visiblity_block"  id="loading_div" ></div>






Comments

Post a Comment

Popular posts from this blog

Setting up Orthanc server on Ubuntu 16

Setting up Orthanc server on Ubuntu 16. # How to compile, install and run newest version of Orthanc DICOM server # from Github source in Ubuntu 16.04 LTS cd sudo apt-get update sudo apt-get install build-essential unzip cmake mercurial uuid-dev libcurl4-openssl-dev liblua5.1-0-dev libgtest-dev libpng-dev libsqlite3-dev libssl-dev libjpeg-dev zlib1g-dev libdcmtk2-dev libboost-all-dev libwrap0-dev libcharls-dev libjsoncpp-dev libpugixml-dev doxygen qupzilla sudo rm -rf Orthanc* sudo apt-get purge orthanc git clone https://github.com/jodogne/OrthancMirror.git mkdir ~/OrthancBuild cd ~/OrthancBuild/ cmake -DSTATIC_BUILD=ON -DCMAKE_BUILD_TYPE=Release ~/OrthancMirror/ sudo make sudo make doc ./Orthanc --version ./Orthanc & qupzilla http://localhost:8042/app/explorer.html # press ESC key twice to ignore warning messages about Mozilla Firefox # when using the file upload function Original Post AT:  https://mark911.wordpress.com/2016/07/13/how-to-compile-i...
Read more

How to install COMODO SSL Certificates for NGINX

Image
DO ALL THINGS ON LIVE NOT ON LOCAL SERVER Setting up a SSL Cert from Comodo ================================= Step 1: Create new example key and CSR files openssl req -new -newkey rsa:2048 -nodes -keyout example_com.key -out example_com.csr This gives you two files: * ``example_com.key`` -- your Private key. You'll need this later to configure ngxinx. * ``example_com.csr`` -- Your CSR file. Now, purchase the certificate [1]_, follow the steps on their site, and you should soon get an email with your *PositiveSSL Certificate*. It contains a zip file with the following: * Root CA Certificate - `AddTrustExternalCARoot.crt` * Intermediate CA Certificate - `COMODORSAAddTrustCA.crt` * Intermediate CA Certificate - `COMODORSADomainValidationSecureServerCA.crt` * Your PositiveSSL Certificate - `www_example_com.crt` (or the subdomain you gave them) DO ALL THINGS ON LIVE NOT ON LOCAL SERVER Step 2: Go To orders, and Click on order detail and then re issuing the certificate ...
Read more

start, stop and restart Nginx (with proper installation guide for Nginx server)

Image
Step 1: Install Nginx Nginx is available in Ubuntu's default repositories, so the installation is rather straight forward. Since this is our first interaction with the  apt  packaging system in this session, we will update our local package index so that we have access to the most recent package listings. Afterwards, we can install  nginx : sudo apt-get update sudo apt-get install nginx After accepting the procedure,  apt-get  will install Nginx and any required dependencies to your server. Step 2: Adjust the Firewall Before we can test Nginx, we need to reconfigure our firewall software to allow access to the service. Nginx registers itself as a service with  ufw , our firewall, upon installation. This makes it rather easy to allow Nginx access. We can list the applications configurations that  ufw  knows how to work with by typing: sudo ufw app list You should get a listing of the application profiles: Output Availa...
Read more