penpot/frontend/resources/styles/main/partials/loader.scss

// full width BG
.loader-content {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

// full with loader CSS
svg#loader-icon {
  height: 100px;
  width: 100px;
  animation: loaderColor 5s infinite ease;
}

#loader-pen1 {
  animation: pen1 2s infinite ease;
}

#loader-pen2 {
  animation: pen2 2s infinite ease;
}

#loader-pen3 {
  animation: pen3 2s infinite ease;
}

// btn pencil loader
svg#loader-pencil {
  fill: $color-primary-darker;
  width: 60px;
}

#loader-line {
  animation: linePencil 0.8s infinite linear;
}