Advertisement
rejuancse

loadmore

May 1st, 2018
171
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.07 KB | None | 0 0
  1. .spinner {
  2.     margin: 0px auto 0;
  3.     width: 70px;
  4.     text-align: center;
  5. }
  6. .spinner.first {
  7.     width: 44%;
  8.     float: left;
  9.     text-align: right;
  10. }
  11. .p-loadmore {
  12.     width: 12%;
  13.     float: left;
  14. }
  15. .spinner.second {
  16.     width: 44%;
  17.     float: right;
  18.     text-align: left;
  19. }
  20. .spinner > div {
  21.     width: 10px;
  22.     height: 10px;
  23.     background-color: #fff;
  24.     border-radius: 100%;
  25.     display: inline-block;
  26.     transition: .3s;
  27. }
  28. .spinner .bounce2 {
  29.     width: 8px;
  30.     height: 8px;
  31.     margin: 0px 0 .6px 0;
  32. }
  33. .spinner .bounce3 {
  34.     width: 6px;
  35.     height: 6px;
  36.     margin: 1.6px 0;
  37. }
  38. .load-wrap:hover .spinner > div {
  39.     -webkit-animation: sk-bouncedelay 1.7s infinite ease-in-out both;
  40.     animation: sk-bouncedelay 1.7s infinite ease-in-out both;
  41.     background: #FF0078;
  42. }
  43. .load-wrap:hover .spinner .bounce1 {
  44.     -webkit-animation-delay: -0.32s;
  45.     animation-delay: -0.32s;
  46. }
  47. .load-wrap:hover .spinner .bounce2 {
  48.     -webkit-animation-delay: -0.26s;
  49.     animation-delay: -0.26s;
  50. }
  51. .load-wrap:hover a.load-more.post-loadmore {
  52.     color: #FF0078;
  53. }
  54. @-webkit-keyframes sk-bouncedelay {
  55.   0%, 80%, 100% { -webkit-transform: scale(0) }
  56.   40% { -webkit-transform: scale(1.0) }
  57. }
  58.  
  59. @keyframes sk-bouncedelay {
  60.     0%, 80%, 100% {
  61.         -webkit-transform: scale(0);
  62.         transform: scale(0);
  63.     } 40% {
  64.         -webkit-transform: scale(1.0);
  65.         transform: scale(1.0);
  66.     }
  67. }
  68.  
  69.  
  70.  
  71. <div class="wrap-loadmore">
  72.                             <div class="spinner first">
  73.                                 <div class="bounce3"></div>
  74.                                 <div class="bounce2"></div>
  75.                                 <div class="bounce1"></div>
  76.                             </div>
  77.                             <div class="p-loadmore">
  78.                                 <a class="load-more post-loadmore" data-show_column="<?php echo $post_column; ?>" data-per_page="<?php echo $post_number; ?>" data-total_posts="<?php echo $allposts->publish; ?>"><?php echo __(' Load More ', 'themeum-core'); ?></a>
  79.                             </div>
  80.                             <div class="spinner second">
  81.                                 <div class="bounce1"></div>
  82.                                 <div class="bounce2"></div>
  83.                                 <div class="bounce3"></div>
  84.                             </div>
  85.                         </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement