SHARE
TWEET

Imagem Loading Effect (CSS)

1xptolevitico69 Jun 5th, 2020 886 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .box {
  2. width:800px;
  3. height:533px;
  4. overflow:hidden;
  5. position:absolute;
  6. left:50%;
  7. transform:translate(-50%);
  8. }
  9.  
  10. #image {
  11. width:100%;
  12. position:absolute;
  13. top:0;
  14. left:0;
  15. }
  16.  
  17. #layer {
  18. width:100%;
  19. height:533px;
  20. background-color:white;
  21. position:absolute;
  22. top:0;
  23. left:0;
  24. }
  25.  
  26. #sp {
  27. cursor:pointer;
  28. width:60px;
  29. height:60px;
  30. background-color:red;
  31. border-radius:50%;
  32. position:absolute;
  33. left:50%;
  34. top:50%;
  35. transform:translate(-50%,-50%);
  36. }
  37.  
  38. #loader {
  39. display:none;
  40. width:300px;
  41. height:300px;
  42. border:30px solid rgba(0,0,0,0.1);
  43. border-radius:50%;
  44. position:absolute;
  45. left:50%;
  46. top:50%;
  47. transform:translate(-50%,-50%);
  48. border-left:30px solid transparent;
  49. border-right:30px solid transparent;
  50. }
  51.  
  52. @keyframes rot {
  53. 100% { transform:translate(-50%,-50%)rotate(360deg); }
  54. }
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