skylight_animation

Loading Page | CSS

Apr 3rd, 2020
13,863
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.54 KB | None | 0 0
  1. #loading {
  2.     position: fixed;
  3.     left: 0px;
  4.     top: 0px;
  5.     width: 100%;
  6.     height: 100%;
  7.     z-index: 9999;
  8.     background: center no-repeat #fff;
  9. }
  10.  
  11. /*-- css spin --*/
  12. @-webkit-keyframes spin {
  13.     0% { -webkit-transform: rotate(0deg); }
  14.     100% { -webkit-transform: rotate(360deg); }
  15. }
  16. @keyframes spin {
  17.     0% { transform: rotate(0deg); }
  18.     100% { transform: rotate(360deg); }
  19. }
  20.  
  21. /*-- css loader --*/
  22. .no-js #loader { display: none; }
  23. .js #loader { display: block; position: absolute; left: 100px; top: 0; }
  24.  
  25. .loader {
  26.     border: 10px solid #f3f3f3;
  27.     border-radius: 50%;
  28.     border-top: 10px solid #3498db;
  29.     border-bottom: 10px solid #FFC107;
  30.     width: 150px;
  31.     height: 150px;
  32.     left: 43.5%;
  33.     top: 20%;
  34.     -webkit-animation: spin 2s linear infinite;
  35.     position: fixed;
  36.     animation: spin 2s linear infinite;
  37. }
  38.  
  39. .textLoader{
  40.     position: fixed;
  41.     top: 56%;
  42.     left: 45.6%;
  43.     color: #34495e;
  44. }
  45.    
  46. /*-- responsive --*/
  47.     @media screen and (max-width: 1034px){
  48.         .textLoader{
  49.             left: 46.2%;
  50.         }
  51.     }
  52.  
  53.     @media screen and (max-width: 824px){
  54.         .textLoader {
  55.             left: 47.2%;
  56.         }
  57.     }
  58.  
  59.     @media screen and (max-width: 732px){
  60.         .textLoader {
  61.             left: 48.2%;
  62.         }
  63.     }
  64.  
  65.     @media screen and (max-width: 500px){
  66.         .loader{
  67.             left: 36.5%;;
  68.         }
  69.         .textLoader {
  70.             left: 40.5%;
  71.         }
  72.     }
  73.  
  74.     @media screen and (max-height: 432px){
  75.         .textLoader {
  76.             top: 65%;
  77.         }
  78.     }
  79.  
  80.     @media screen and (max-height: 350px){
  81.         .textLoader {
  82.             top: 75%;
  83.         }
  84.     }
  85.  
  86.     @media screen and (max-height: 312px){
  87.         .textLoader {
  88.             display: none;
  89.         }
  90.     }
  91. /*-- responsive --*/
Advertisement
Add Comment
Please, Sign In to add comment