:root {
  	--progressbarcolor1:no-repeat linear-gradient(var(--theme-color-1) 0 0);
  	--progressbarcolor2: #E0E0F6;
  	--screenlockercolor: #E0E0F6;
  	--progressbarspeed: 3s;
}

@keyframes progressbar-animation {

	0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}

}

@keyframes blinker {
	
  50% {
    	opacity: 0;
  }

}

#carregando {
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: transparent;
	z-index: 99999999;
}

#carregando div.background {
    background-color: var(--screenlockercolor);
	width: 100%;
    height: 100%;
    margin-top: 4px;    
    opacity: 0.4;
}

#loader {
	width: 100%;
	height: auto;
	position:absolute;
}

#focus-holder {
	height: 0px;
	width: 0px;
	border: none;
	outline: none;
	background: none;
	position: absolute;
	left: -10px;
	top: -10px;
}

#loader img {
	background: transparent;
	height: 3px;
	width: 100%;
    position: absolute;
	top: 0px;
    left: 0px;	
}

#loader span {
	float: right;
	padding-left: 20px;
	padding-right: 20px;
	font-family: Arial;
	font-size: 15px;
}

#progress_bar {
    height: 4px;
    width: 100%;
    background: var(--progressbarcolor1),var(--progressbarcolor1), var(--progressbarcolor2);
    background-size: 60% 100%;
    animation: progressbar-animation var(--progressbarspeed) infinite;
    will-change: background-position;
}