.si-avatar {
	&__loading {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background: hsla(0, 0%, 0%, 0.5);
		pointer-events: none;
		&:after {
			position: absolute;
			box-sizing: border-box;
			width: 50%;
			height: 50%;
			border: 2px solid transparent;
			border-bottom: 2px solid white;
			border-radius: 50%;
			content: '';
			animation: siRotateLoading 0.8s ease infinite;
		}
		&:before {
			position: absolute;
			box-sizing: border-box;
			width: 50%;
			height: 50%;
			opacity: 0.2;
			border: 2px dashed transparent;
			border-bottom: 2px dashed white;
			border-radius: 50%;
			content: '';
			animation: siRotateLoading 0.8s linear infinite;
		}
	}
}