Skip to content

Instantly share code, notes, and snippets.

@metinsaylan
Created September 8, 2021 13:18
Show Gist options
  • Save metinsaylan/b46802b6460fdf8826b5265773712972 to your computer and use it in GitHub Desktop.
Save metinsaylan/b46802b6460fdf8826b5265773712972 to your computer and use it in GitHub Desktop.
Loading circle animated background 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==);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment