@govbr-ds/core/dist/components/loading/loading.css

Padrão Digital de Governo

.loading,
.br-loading {
  --loading-size: var(--loading-indetermined-diameter-sm);
  --loading-diameter: 84px;
  --loading-stroke: 5px;
  --loading-indetermined-color: var(--interactive);
  --loading-indetermined-diameter-md: 44px;
  --loading-indetermined-diameter-sm: 24px;
  position: relative;
  z-index: var(--z-index-layer-4);
}
.loading[data-progress]:not(:empty),
.br-loading[data-progress]:not(:empty) {
  background-color: var(--border-color);
  border-radius: 50%;
}
.loading[data-progress]:not(:empty)::before,
.br-loading[data-progress]:not(:empty)::before {
  content: none;
}
.loading[data-progress]::after,
.br-loading[data-progress]::after {
  --loading-size: calc(var(--loading-diameter) - var(--loading-stroke) * 2);
  background: var(--background);
  border-radius: 50%;
  color: var(--interactive);
  content: attr(data-progress) "%";
  font-size: var(--font-size-scale-up-02);
  font-weight: var(--font-weight-semi-bold);
  height: var(--loading-size);
  line-height: var(--loading-size);
  margin: var(--loading-stroke);
  position: absolute;
  text-align: center;
  width: var(--loading-size);
}
.loading[data-progress].loading-mask, .loading[data-progress].loading-fill,
.loading[data-progress] .br-loading-mask,
.loading[data-progress] .br-loading-fill,
.br-loading[data-progress].loading-mask,
.br-loading[data-progress].loading-fill,
.br-loading[data-progress] .br-loading-mask,
.br-loading[data-progress] .br-loading-fill {
  backface-visibility: hidden;
  border-radius: 50%;
  clip: rect(0, var(--loading-diameter), var(--loading-diameter), calc(var(--loading-diameter) * 0.5));
  height: var(--loading-diameter);
  overflow: hidden;
  position: absolute;
  width: var(--loading-diameter);
}
.loading[data-progress].loading-fill,
.loading[data-progress] .br-loading-fill,
.br-loading[data-progress].loading-fill,
.br-loading[data-progress] .br-loading-fill {
  background: var(--interactive);
  clip: rect(0, calc(var(--loading-diameter) * 0.5), var(--loading-diameter), 0);
}
.loading::before,
.br-loading::before {
  animation: spinAround 1.3s infinite linear;
  border: 2px solid var(--loading-indetermined-color);
  border-radius: 50%;
  border-right-color: transparent;
  content: "";
  display: block;
  height: var(--loading-size);
  left: calc(50% - var(--loading-size) * 0.5);
  position: absolute;
  top: calc(50% - var(--loading-size) * 0.5);
  width: var(--loading-size);
}
.loading:not(.br-button),
.br-loading:not(.br-button) {
  height: var(--loading-size);
  width: var(--loading-size);
}
.loading:not(.br-button).medium,
.br-loading:not(.br-button).medium {
  --loading-size: var(--loading-indetermined-diameter-md);
}
.loading:not(.br-button).medium::before,
.br-loading:not(.br-button).medium::before {
  border-width: 4px;
}
.loading:not(.br-button)[data-progress],
.br-loading:not(.br-button)[data-progress] {
  --loading-size: var(--loading-diameter);
}
.loading:not(.br-button)[data-progress]::before,
.br-loading:not(.br-button)[data-progress]::before {
  border-width: var(--loading-stroke);
}
.loading[data-progress="1"] .br-loading-mask.full,
.loading[data-progress="1"] .br-loading-fill,
.br-loading[data-progress="1"] .br-loading-mask.full,
.br-loading[data-progress="1"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(1.8deg);
}
.loading[data-progress="2"] .br-loading-mask.full,
.loading[data-progress="2"] .br-loading-fill,
.br-loading[data-progress="2"] .br-loading-mask.full,
.br-loading[data-progress="2"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(3.6deg);
}
.loading[data-progress="3"] .br-loading-mask.full,
.loading[data-progress="3"] .br-loading-fill,
.br-loading[data-progress="3"] .br-loading-mask.full,
.br-loading[data-progress="3"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(5.4deg);
}
.loading[data-progress="4"] .br-loading-mask.full,
.loading[data-progress="4"] .br-loading-fill,
.br-loading[data-progress="4"] .br-loading-mask.full,
.br-loading[data-progress="4"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(7.2deg);
}
.loading[data-progress="5"] .br-loading-mask.full,
.loading[data-progress="5"] .br-loading-fill,
.br-loading[data-progress="5"] .br-loading-mask.full,
.br-loading[data-progress="5"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(9deg);
}
.loading[data-progress="6"] .br-loading-mask.full,
.loading[data-progress="6"] .br-loading-fill,
.br-loading[data-progress="6"] .br-loading-mask.full,
.br-loading[data-progress="6"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(10.8deg);
}
.loading[data-progress="7"] .br-loading-mask.full,
.loading[data-progress="7"] .br-loading-fill,
.br-loading[data-progress="7"] .br-loading-mask.full,
.br-loading[data-progress="7"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(12.6deg);
}
.loading[data-progress="8"] .br-loading-mask.full,
.loading[data-progress="8"] .br-loading-fill,
.br-loading[data-progress="8"] .br-loading-mask.full,
.br-loading[data-progress="8"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(14.4deg);
}
.loading[data-progress="9"] .br-loading-mask.full,
.loading[data-progress="9"] .br-loading-fill,
.br-loading[data-progress="9"] .br-loading-mask.full,
.br-loading[data-progress="9"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(16.2deg);
}
.loading[data-progress="10"] .br-loading-mask.full,
.loading[data-progress="10"] .br-loading-fill,
.br-loading[data-progress="10"] .br-loading-mask.full,
.br-loading[data-progress="10"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(18deg);
}
.loading[data-progress="11"] .br-loading-mask.full,
.loading[data-progress="11"] .br-loading-fill,
.br-loading[data-progress="11"] .br-loading-mask.full,
.br-loading[data-progress="11"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(19.8deg);
}
.loading[data-progress="12"] .br-loading-mask.full,
.loading[data-progress="12"] .br-loading-fill,
.br-loading[data-progress="12"] .br-loading-mask.full,
.br-loading[data-progress="12"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(21.6deg);
}
.loading[data-progress="13"] .br-loading-mask.full,
.loading[data-progress="13"] .br-loading-fill,
.br-loading[data-progress="13"] .br-loading-mask.full,
.br-loading[data-progress="13"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(23.4deg);
}
.loading[data-progress="14"] .br-loading-mask.full,
.loading[data-progress="14"] .br-loading-fill,
.br-loading[data-progress="14"] .br-loading-mask.full,
.br-loading[data-progress="14"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(25.2deg);
}
.loading[data-progress="15"] .br-loading-mask.full,
.loading[data-progress="15"] .br-loading-fill,
.br-loading[data-progress="15"] .br-loading-mask.full,
.br-loading[data-progress="15"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(27deg);
}
.loading[data-progress="16"] .br-loading-mask.full,
.loading[data-progress="16"] .br-loading-fill,
.br-loading[data-progress="16"] .br-loading-mask.full,
.br-loading[data-progress="16"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(28.8deg);
}
.loading[data-progress="17"] .br-loading-mask.full,
.loading[data-progress="17"] .br-loading-fill,
.br-loading[data-progress="17"] .br-loading-mask.full,
.br-loading[data-progress="17"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(30.6deg);
}
.loading[data-progress="18"] .br-loading-mask.full,
.loading[data-progress="18"] .br-loading-fill,
.br-loading[data-progress="18"] .br-loading-mask.full,
.br-loading[data-progress="18"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(32.4deg);
}
.loading[data-progress="19"] .br-loading-mask.full,
.loading[data-progress="19"] .br-loading-fill,
.br-loading[data-progress="19"] .br-loading-mask.full,
.br-loading[data-progress="19"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(34.2deg);
}
.loading[data-progress="20"] .br-loading-mask.full,
.loading[data-progress="20"] .br-loading-fill,
.br-loading[data-progress="20"] .br-loading-mask.full,
.br-loading[data-progress="20"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(36deg);
}
.loading[data-progress="21"] .br-loading-mask.full,
.loading[data-progress="21"] .br-loading-fill,
.br-loading[data-progress="21"] .br-loading-mask.full,
.br-loading[data-progress="21"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(37.8deg);
}
.loading[data-progress="22"] .br-loading-mask.full,
.loading[data-progress="22"] .br-loading-fill,
.br-loading[data-progress="22"] .br-loading-mask.full,
.br-loading[data-progress="22"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(39.6deg);
}
.loading[data-progress="23"] .br-loading-mask.full,
.loading[data-progress="23"] .br-loading-fill,
.br-loading[data-progress="23"] .br-loading-mask.full,
.br-loading[data-progress="23"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(41.4deg);
}
.loading[data-progress="24"] .br-loading-mask.full,
.loading[data-progress="24"] .br-loading-fill,
.br-loading[data-progress="24"] .br-loading-mask.full,
.br-loading[data-progress="24"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(43.2deg);
}
.loading[data-progress="25"] .br-loading-mask.full,
.loading[data-progress="25"] .br-loading-fill,
.br-loading[data-progress="25"] .br-loading-mask.full,
.br-loading[data-progress="25"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(45deg);
}
.loading[data-progress="26"] .br-loading-mask.full,
.loading[data-progress="26"] .br-loading-fill,
.br-loading[data-progress="26"] .br-loading-mask.full,
.br-loading[data-progress="26"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(46.8deg);
}
.loading[data-progress="27"] .br-loading-mask.full,
.loading[data-progress="27"] .br-loading-fill,
.br-loading[data-progress="27"] .br-loading-mask.full,
.br-loading[data-progress="27"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(48.6deg);
}
.loading[data-progress="28"] .br-loading-mask.full,
.loading[data-progress="28"] .br-loading-fill,
.br-loading[data-progress="28"] .br-loading-mask.full,
.br-loading[data-progress="28"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(50.4deg);
}
.loading[data-progress="29"] .br-loading-mask.full,
.loading[data-progress="29"] .br-loading-fill,
.br-loading[data-progress="29"] .br-loading-mask.full,
.br-loading[data-progress="29"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(52.2deg);
}
.loading[data-progress="30"] .br-loading-mask.full,
.loading[data-progress="30"] .br-loading-fill,
.br-loading[data-progress="30"] .br-loading-mask.full,
.br-loading[data-progress="30"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(54deg);
}
.loading[data-progress="31"] .br-loading-mask.full,
.loading[data-progress="31"] .br-loading-fill,
.br-loading[data-progress="31"] .br-loading-mask.full,
.br-loading[data-progress="31"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(55.8deg);
}
.loading[data-progress="32"] .br-loading-mask.full,
.loading[data-progress="32"] .br-loading-fill,
.br-loading[data-progress="32"] .br-loading-mask.full,
.br-loading[data-progress="32"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(57.6deg);
}
.loading[data-progress="33"] .br-loading-mask.full,
.loading[data-progress="33"] .br-loading-fill,
.br-loading[data-progress="33"] .br-loading-mask.full,
.br-loading[data-progress="33"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(59.4deg);
}
.loading[data-progress="34"] .br-loading-mask.full,
.loading[data-progress="34"] .br-loading-fill,
.br-loading[data-progress="34"] .br-loading-mask.full,
.br-loading[data-progress="34"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(61.2deg);
}
.loading[data-progress="35"] .br-loading-mask.full,
.loading[data-progress="35"] .br-loading-fill,
.br-loading[data-progress="35"] .br-loading-mask.full,
.br-loading[data-progress="35"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(63deg);
}
.loading[data-progress="36"] .br-loading-mask.full,
.loading[data-progress="36"] .br-loading-fill,
.br-loading[data-progress="36"] .br-loading-mask.full,
.br-loading[data-progress="36"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(64.8deg);
}
.loading[data-progress="37"] .br-loading-mask.full,
.loading[data-progress="37"] .br-loading-fill,
.br-loading[data-progress="37"] .br-loading-mask.full,
.br-loading[data-progress="37"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(66.6deg);
}
.loading[data-progress="38"] .br-loading-mask.full,
.loading[data-progress="38"] .br-loading-fill,
.br-loading[data-progress="38"] .br-loading-mask.full,
.br-loading[data-progress="38"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(68.4deg);
}
.loading[data-progress="39"] .br-loading-mask.full,
.loading[data-progress="39"] .br-loading-fill,
.br-loading[data-progress="39"] .br-loading-mask.full,
.br-loading[data-progress="39"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(70.2deg);
}
.loading[data-progress="40"] .br-loading-mask.full,
.loading[data-progress="40"] .br-loading-fill,
.br-loading[data-progress="40"] .br-loading-mask.full,
.br-loading[data-progress="40"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(72deg);
}
.loading[data-progress="41"] .br-loading-mask.full,
.loading[data-progress="41"] .br-loading-fill,
.br-loading[data-progress="41"] .br-loading-mask.full,
.br-loading[data-progress="41"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(73.8deg);
}
.loading[data-progress="42"] .br-loading-mask.full,
.loading[data-progress="42"] .br-loading-fill,
.br-loading[data-progress="42"] .br-loading-mask.full,
.br-loading[data-progress="42"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(75.6deg);
}
.loading[data-progress="43"] .br-loading-mask.full,
.loading[data-progress="43"] .br-loading-fill,
.br-loading[data-progress="43"] .br-loading-mask.full,
.br-loading[data-progress="43"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(77.4deg);
}
.loading[data-progress="44"] .br-loading-mask.full,
.loading[data-progress="44"] .br-loading-fill,
.br-loading[data-progress="44"] .br-loading-mask.full,
.br-loading[data-progress="44"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(79.2deg);
}
.loading[data-progress="45"] .br-loading-mask.full,
.loading[data-progress="45"] .br-loading-fill,
.br-loading[data-progress="45"] .br-loading-mask.full,
.br-loading[data-progress="45"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(81deg);
}
.loading[data-progress="46"] .br-loading-mask.full,
.loading[data-progress="46"] .br-loading-fill,
.br-loading[data-progress="46"] .br-loading-mask.full,
.br-loading[data-progress="46"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(82.8deg);
}
.loading[data-progress="47"] .br-loading-mask.full,
.loading[data-progress="47"] .br-loading-fill,
.br-loading[data-progress="47"] .br-loading-mask.full,
.br-loading[data-progress="47"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(84.6deg);
}
.loading[data-progress="48"] .br-loading-mask.full,
.loading[data-progress="48"] .br-loading-fill,
.br-loading[data-progress="48"] .br-loading-mask.full,
.br-loading[data-progress="48"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(86.4deg);
}
.loading[data-progress="49"] .br-loading-mask.full,
.loading[data-progress="49"] .br-loading-fill,
.br-loading[data-progress="49"] .br-loading-mask.full,
.br-loading[data-progress="49"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(88.2deg);
}
.loading[data-progress="50"] .br-loading-mask.full,
.loading[data-progress="50"] .br-loading-fill,
.br-loading[data-progress="50"] .br-loading-mask.full,
.br-loading[data-progress="50"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(90deg);
}
.loading[data-progress="51"] .br-loading-mask.full,
.loading[data-progress="51"] .br-loading-fill,
.br-loading[data-progress="51"] .br-loading-mask.full,
.br-loading[data-progress="51"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(91.8deg);
}
.loading[data-progress="52"] .br-loading-mask.full,
.loading[data-progress="52"] .br-loading-fill,
.br-loading[data-progress="52"] .br-loading-mask.full,
.br-loading[data-progress="52"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(93.6deg);
}
.loading[data-progress="53"] .br-loading-mask.full,
.loading[data-progress="53"] .br-loading-fill,
.br-loading[data-progress="53"] .br-loading-mask.full,
.br-loading[data-progress="53"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(95.4deg);
}
.loading[data-progress="54"] .br-loading-mask.full,
.loading[data-progress="54"] .br-loading-fill,
.br-loading[data-progress="54"] .br-loading-mask.full,
.br-loading[data-progress="54"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(97.2deg);
}
.loading[data-progress="55"] .br-loading-mask.full,
.loading[data-progress="55"] .br-loading-fill,
.br-loading[data-progress="55"] .br-loading-mask.full,
.br-loading[data-progress="55"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(99deg);
}
.loading[data-progress="56"] .br-loading-mask.full,
.loading[data-progress="56"] .br-loading-fill,
.br-loading[data-progress="56"] .br-loading-mask.full,
.br-loading[data-progress="56"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(100.8deg);
}
.loading[data-progress="57"] .br-loading-mask.full,
.loading[data-progress="57"] .br-loading-fill,
.br-loading[data-progress="57"] .br-loading-mask.full,
.br-loading[data-progress="57"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(102.6deg);
}
.loading[data-progress="58"] .br-loading-mask.full,
.loading[data-progress="58"] .br-loading-fill,
.br-loading[data-progress="58"] .br-loading-mask.full,
.br-loading[data-progress="58"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(104.4deg);
}
.loading[data-progress="59"] .br-loading-mask.full,
.loading[data-progress="59"] .br-loading-fill,
.br-loading[data-progress="59"] .br-loading-mask.full,
.br-loading[data-progress="59"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(106.2deg);
}
.loading[data-progress="60"] .br-loading-mask.full,
.loading[data-progress="60"] .br-loading-fill,
.br-loading[data-progress="60"] .br-loading-mask.full,
.br-loading[data-progress="60"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(108deg);
}
.loading[data-progress="61"] .br-loading-mask.full,
.loading[data-progress="61"] .br-loading-fill,
.br-loading[data-progress="61"] .br-loading-mask.full,
.br-loading[data-progress="61"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(109.8deg);
}
.loading[data-progress="62"] .br-loading-mask.full,
.loading[data-progress="62"] .br-loading-fill,
.br-loading[data-progress="62"] .br-loading-mask.full,
.br-loading[data-progress="62"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(111.6deg);
}
.loading[data-progress="63"] .br-loading-mask.full,
.loading[data-progress="63"] .br-loading-fill,
.br-loading[data-progress="63"] .br-loading-mask.full,
.br-loading[data-progress="63"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(113.4deg);
}
.loading[data-progress="64"] .br-loading-mask.full,
.loading[data-progress="64"] .br-loading-fill,
.br-loading[data-progress="64"] .br-loading-mask.full,
.br-loading[data-progress="64"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(115.2deg);
}
.loading[data-progress="65"] .br-loading-mask.full,
.loading[data-progress="65"] .br-loading-fill,
.br-loading[data-progress="65"] .br-loading-mask.full,
.br-loading[data-progress="65"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(117deg);
}
.loading[data-progress="66"] .br-loading-mask.full,
.loading[data-progress="66"] .br-loading-fill,
.br-loading[data-progress="66"] .br-loading-mask.full,
.br-loading[data-progress="66"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(118.8deg);
}
.loading[data-progress="67"] .br-loading-mask.full,
.loading[data-progress="67"] .br-loading-fill,
.br-loading[data-progress="67"] .br-loading-mask.full,
.br-loading[data-progress="67"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(120.6deg);
}
.loading[data-progress="68"] .br-loading-mask.full,
.loading[data-progress="68"] .br-loading-fill,
.br-loading[data-progress="68"] .br-loading-mask.full,
.br-loading[data-progress="68"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(122.4deg);
}
.loading[data-progress="69"] .br-loading-mask.full,
.loading[data-progress="69"] .br-loading-fill,
.br-loading[data-progress="69"] .br-loading-mask.full,
.br-loading[data-progress="69"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(124.2deg);
}
.loading[data-progress="70"] .br-loading-mask.full,
.loading[data-progress="70"] .br-loading-fill,
.br-loading[data-progress="70"] .br-loading-mask.full,
.br-loading[data-progress="70"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(126deg);
}
.loading[data-progress="71"] .br-loading-mask.full,
.loading[data-progress="71"] .br-loading-fill,
.br-loading[data-progress="71"] .br-loading-mask.full,
.br-loading[data-progress="71"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(127.8deg);
}
.loading[data-progress="72"] .br-loading-mask.full,
.loading[data-progress="72"] .br-loading-fill,
.br-loading[data-progress="72"] .br-loading-mask.full,
.br-loading[data-progress="72"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(129.6deg);
}
.loading[data-progress="73"] .br-loading-mask.full,
.loading[data-progress="73"] .br-loading-fill,
.br-loading[data-progress="73"] .br-loading-mask.full,
.br-loading[data-progress="73"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(131.4deg);
}
.loading[data-progress="74"] .br-loading-mask.full,
.loading[data-progress="74"] .br-loading-fill,
.br-loading[data-progress="74"] .br-loading-mask.full,
.br-loading[data-progress="74"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(133.2deg);
}
.loading[data-progress="75"] .br-loading-mask.full,
.loading[data-progress="75"] .br-loading-fill,
.br-loading[data-progress="75"] .br-loading-mask.full,
.br-loading[data-progress="75"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(135deg);
}
.loading[data-progress="76"] .br-loading-mask.full,
.loading[data-progress="76"] .br-loading-fill,
.br-loading[data-progress="76"] .br-loading-mask.full,
.br-loading[data-progress="76"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(136.8deg);
}
.loading[data-progress="77"] .br-loading-mask.full,
.loading[data-progress="77"] .br-loading-fill,
.br-loading[data-progress="77"] .br-loading-mask.full,
.br-loading[data-progress="77"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(138.6deg);
}
.loading[data-progress="78"] .br-loading-mask.full,
.loading[data-progress="78"] .br-loading-fill,
.br-loading[data-progress="78"] .br-loading-mask.full,
.br-loading[data-progress="78"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(140.4deg);
}
.loading[data-progress="79"] .br-loading-mask.full,
.loading[data-progress="79"] .br-loading-fill,
.br-loading[data-progress="79"] .br-loading-mask.full,
.br-loading[data-progress="79"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(142.2deg);
}
.loading[data-progress="80"] .br-loading-mask.full,
.loading[data-progress="80"] .br-loading-fill,
.br-loading[data-progress="80"] .br-loading-mask.full,
.br-loading[data-progress="80"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(144deg);
}
.loading[data-progress="81"] .br-loading-mask.full,
.loading[data-progress="81"] .br-loading-fill,
.br-loading[data-progress="81"] .br-loading-mask.full,
.br-loading[data-progress="81"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(145.8deg);
}
.loading[data-progress="82"] .br-loading-mask.full,
.loading[data-progress="82"] .br-loading-fill,
.br-loading[data-progress="82"] .br-loading-mask.full,
.br-loading[data-progress="82"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(147.6deg);
}
.loading[data-progress="83"] .br-loading-mask.full,
.loading[data-progress="83"] .br-loading-fill,
.br-loading[data-progress="83"] .br-loading-mask.full,
.br-loading[data-progress="83"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(149.4deg);
}
.loading[data-progress="84"] .br-loading-mask.full,
.loading[data-progress="84"] .br-loading-fill,
.br-loading[data-progress="84"] .br-loading-mask.full,
.br-loading[data-progress="84"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(151.2deg);
}
.loading[data-progress="85"] .br-loading-mask.full,
.loading[data-progress="85"] .br-loading-fill,
.br-loading[data-progress="85"] .br-loading-mask.full,
.br-loading[data-progress="85"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(153deg);
}
.loading[data-progress="86"] .br-loading-mask.full,
.loading[data-progress="86"] .br-loading-fill,
.br-loading[data-progress="86"] .br-loading-mask.full,
.br-loading[data-progress="86"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(154.8deg);
}
.loading[data-progress="87"] .br-loading-mask.full,
.loading[data-progress="87"] .br-loading-fill,
.br-loading[data-progress="87"] .br-loading-mask.full,
.br-loading[data-progress="87"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(156.6deg);
}
.loading[data-progress="88"] .br-loading-mask.full,
.loading[data-progress="88"] .br-loading-fill,
.br-loading[data-progress="88"] .br-loading-mask.full,
.br-loading[data-progress="88"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(158.4deg);
}
.loading[data-progress="89"] .br-loading-mask.full,
.loading[data-progress="89"] .br-loading-fill,
.br-loading[data-progress="89"] .br-loading-mask.full,
.br-loading[data-progress="89"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(160.2deg);
}
.loading[data-progress="90"] .br-loading-mask.full,
.loading[data-progress="90"] .br-loading-fill,
.br-loading[data-progress="90"] .br-loading-mask.full,
.br-loading[data-progress="90"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(162deg);
}
.loading[data-progress="91"] .br-loading-mask.full,
.loading[data-progress="91"] .br-loading-fill,
.br-loading[data-progress="91"] .br-loading-mask.full,
.br-loading[data-progress="91"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(163.8deg);
}
.loading[data-progress="92"] .br-loading-mask.full,
.loading[data-progress="92"] .br-loading-fill,
.br-loading[data-progress="92"] .br-loading-mask.full,
.br-loading[data-progress="92"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(165.6deg);
}
.loading[data-progress="93"] .br-loading-mask.full,
.loading[data-progress="93"] .br-loading-fill,
.br-loading[data-progress="93"] .br-loading-mask.full,
.br-loading[data-progress="93"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(167.4deg);
}
.loading[data-progress="94"] .br-loading-mask.full,
.loading[data-progress="94"] .br-loading-fill,
.br-loading[data-progress="94"] .br-loading-mask.full,
.br-loading[data-progress="94"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(169.2deg);
}
.loading[data-progress="95"] .br-loading-mask.full,
.loading[data-progress="95"] .br-loading-fill,
.br-loading[data-progress="95"] .br-loading-mask.full,
.br-loading[data-progress="95"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(171deg);
}
.loading[data-progress="96"] .br-loading-mask.full,
.loading[data-progress="96"] .br-loading-fill,
.br-loading[data-progress="96"] .br-loading-mask.full,
.br-loading[data-progress="96"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(172.8deg);
}
.loading[data-progress="97"] .br-loading-mask.full,
.loading[data-progress="97"] .br-loading-fill,
.br-loading[data-progress="97"] .br-loading-mask.full,
.br-loading[data-progress="97"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(174.6deg);
}
.loading[data-progress="98"] .br-loading-mask.full,
.loading[data-progress="98"] .br-loading-fill,
.br-loading[data-progress="98"] .br-loading-mask.full,
.br-loading[data-progress="98"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(176.4deg);
}
.loading[data-progress="99"] .br-loading-mask.full,
.loading[data-progress="99"] .br-loading-fill,
.br-loading[data-progress="99"] .br-loading-mask.full,
.br-loading[data-progress="99"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(178.2deg);
}
.loading[data-progress="100"] .br-loading-mask.full,
.loading[data-progress="100"] .br-loading-fill,
.br-loading[data-progress="100"] .br-loading-mask.full,
.br-loading[data-progress="100"] .br-loading-fill {
  animation: fill ease-in-out 2s;
  transform: rotate(180deg);
}
@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
}

/* Centraliza o estado de loading quando aplicado ao body da modal */
.br-modal-body.loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-base);
  justify-content: center;
  min-height: 160px;
  text-align: center;
  width: 100%;
}

.br-modal-body.loading::before {
  display: block;
}

/*# sourceMappingURL=loading.css.map*/