SHARE
TWEET

Untitled

a guest Jul 18th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #loading{
  2.  
  3.     background: #333;
  4.  
  5.     color: #fff;
  6.  
  7.     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  8.  
  9.     position: fixed;
  10.  
  11.     z-index: 5;
  12.  
  13.     width: 100%;
  14.  
  15.     height: 100%;
  16.  
  17.     background: #333;
  18.  
  19.     display: none;
  20.  
  21. }
  22.  
  23. #loading h3{
  24. top: 60%;
  25. left: 50%;
  26. z-index: 7;
  27. position: fixed;
  28. display: block;
  29. transform: translateX(-50%);
  30. }
  31.  
  32. .loadingStyle{
  33. z-index: 6;
  34. display: flex;
  35. justify-content: space-around;
  36. top: 50%;
  37. left: 50%;
  38. transform: translate(-50%,-50%);
  39. position: fixed;
  40. width: 70%;
  41. height: 70%;
  42. }
  43.  
  44. .loadingStyle-bar{
  45. width: 20px;
  46. height: 20px;
  47. border-radius: 50%;
  48. background: #fff;
  49. position: fixed;
  50. top: 50%;
  51. transform: translate(-50%,-50%);
  52. animation-name: bounding;
  53. animation-duration: 1.8s;
  54. animation-iteration-count: infinite;
  55. }
  56.  
  57. .loadingStyle-bar:nth-child(1){
  58. left: 5%;
  59. animation-delay: 0s;
  60. }
  61.  
  62. .loadingStyle-bar:nth-child(2){
  63. left: 50%;
  64. animation-delay: 0.4s;
  65. }
  66.  
  67. .loadingStyle-bar:nth-child(3){
  68. left: 95%;
  69. animation-delay: 0.8s;
  70. }
  71.  
  72. @keyframes bounding{
  73. 0%{
  74. width: 20px;
  75. height: 20px;
  76. }
  77.  
  78. 50%{
  79. width: 50px;
  80. height: 50px;
  81. }
  82.  
  83. 100%{
  84. width: 20px;
  85. height: 20px;
  86. }
  87. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top