Advertisement
rejuancse

loadmore

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