### Style Albedo Pre-loader Container

Source: https://github.com/stellar-expert/albedo/blob/master/frontend/src/static/app-html-template/index.html

This CSS snippet defines the styles for the full-page pre-loader container, ensuring it covers the entire viewport and centers its content. It sets the text color and font size for any loading messages.

```CSS
#pre-loader {
  width: 100%;
  height: 100%;
  color: #07A2CC;
  font-size: 2.5rem;
  text-align: center;
  display: flex;
  align-items: center;
}
```

--------------------------------

### Style Albedo Loader Component and Animations

Source: https://github.com/stellar-expert/albedo/blob/master/frontend/src/static/app-html-template/index.html

This CSS snippet defines the visual appearance and animations for the Albedo loader component. It includes a base64 encoded SVG for the loader's background and mask, a moving light effect using a pseudo-element, and animations for the loader's appearance and the light's movement. It also provides utility classes for different loader sizes and positioning.

```CSS
.loader {
  --bg-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1OCA1OCI+DQo8cGF0aCBmaWxsPSIjMDY5MUI3IiBkPSJNMzAuMTA1Njc4NiwyLjUyODA3NTJoLTIuMjExNDMxNUw1LjUwNzA0ODYsNTUuNDQzNjAzNWwwLjA2Njk0OTgsMC4wMjgzMjAzaDUuOTc0MDYwMWw0LjQ4MDAwMDUtMTAuNTg5MDAwNw0KCWM5LjMwOTgxNDUsMy4xMzc5Nzc2LDE5LjM5OTY3MTYsMy4wODUzODgyLDI4LjY3NjI2NzYtMC4xNDk0NzEzbDQuNTQzMjgxNiwxMC43Mzg0NjA1aDMuMTc4MzQwOWwwLjA2NzAwMTMtMC4wMjgzMjAzDQoJTDMwLjEwNTY3ODYsMi41MjgwNzUyeiBNMzAuMTUwNTk4NSw0NS4xOTg2MTIyYy00LjUzMzk0Ny0wLjAwMDg4NS05LjAzODA4MDItMC43MzI5NTIxLTEzLjMzODkzMDEtMi4xNjc5OTkzbDEzLjU4NjAwMDQtMzIuMTEyMzY5NQ0KCWwxMy41MjU5OTkxLDMxLjk3MDA4OUMzOS40OTI4NDM2LDQ0LjQxODEyOSwzNC44MzgwNzc1LDQ1LjE5ODkxMzYsMzAuMTUwNTk4NSw0NS4xOTg2MTIyeiIvPg0KPC9zdmc+");
  display: block;
  font-size: 16px;
  width: 2em;
  height: 2em;
  margin: 1em auto;
  padding: 1em;
  box-sizing: border-box;
  background: var(--bg-image);
  mask-image: var(--bg-image);
  -webkit-mask-image: var(--bg-image);
  background-size: auto 2em;
  animation: loader-appear 0.5s;
  overflow: hidden;
}
.loader:before {
  content: '';
  display: block;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 0.4em 0.4em #FFF;
  transform: translate(-1em, 1.3em);
  animation: track-light 1.4s 0.5s infinite;
}
@keyframes track-light {
  10% { transform: translate(-1em, 1.3em); }
  50% { transform: translate(-0.08em, -0.9em) }
  90% { transform: translate(0.9em, 1.9em) }
}
.loader.large {
  font-size: 24px;
}
.loader.page-center {
  margin-top: 40vh;
}
@keyframes loader-appear {
  0%, 50% { opacity: 0; }
  100% { opacity: 1; }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.