Change color of dots AJAX content Loading in Visual Composer

Question

How can i change color of dods animation when post grid is loading? Wordpress visual composer.

Answer 1

Try this custom CSS-

.vc_grid-loading,
.vc_grid-loading:after,
.vc_grid-loading:before {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out
}

.vc_grid-loading:before {
    left: -20px
}

.vc_grid-loading:after {
    left: 20px;
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

.vc_grid-loading:after,
.vc_grid-loading:before {
    content: '';
    position: absolute;
    top: 0
}

@-webkit-keyframes load7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em rgba(51, 51, 51, .75)
    }
    40% {
        box-shadow: 0 2.5em 0 0 rgba(51, 51, 51, .75)
    }
}

@keyframes load7 {
    0%,
    100%,
    80% {
        box-shadow: 0 2.5em 0 -1.3em rgba(51, 51, 51, .75)
    }
    40% {
        box-shadow: 0 2.5em 0 0 rgba(51, 51, 51, .75)
    }
}

Answer 2

Try overwriting the animations in CSS and change the colors below in rgba() to your own liking.

You should put code below in custom CSS:

@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
    }
    40% {
      box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
    }
  }
  @keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
    }
    40% {
      box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
    }
  }