Loading circle animated background CSS

circles-loader.css

.bg-c {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--cg);
  border-radius: 6px;

  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBkPSJNNSwyNSBhMSwxIDAgMCwwIDQwLDAiIHRyYW5zZm9ybT0icm90YXRlKDE4NC4yMiAyNSAyNSkiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjUgMjUiIHRvPSIzNjAgMjUgMjUiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLS42cyI+PC9hbmltYXRlVHJhbnNmb3JtPjwvcGF0aD48cGF0aCBkPSJNMTAsMjUgYTEsMSAwIDAsMCAzMCwwIiB0cmFuc2Zvcm09InJvdGF0ZSgzMjAuMjc0IDI1IDI1KSI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlVHlwZT0ieG1sIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCAyNSAyNSIgdG89IjM2MCAyNSAyNSIgZHVyPSIuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9wYXRoPjwvc3ZnPg==);
}