@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
    
.animation__shake{
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

.ring-frame,
.disc-frame{
	height:100%;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.ring-frame,
.disc-frame,
.ring,
.disc{
	position:absolute;
}
	
.ring{
	border:2px solid rgba(0,0,0,0);
	border-left:2px solid var(--blue);
	border-right:2px solid var(--blue);
	border-radius:50%;
	display:flex;	
}

.ring:nth-child(1){
	animation: spin 1s linear infinite;
}

.ring:nth-child(2){
	animation: spinner 1.5s linear infinite;
}

.ring:nth-child(3){
	animation: spin 2s linear infinite;
}

.disc{
	height:var(--size);
	width:var(--size);
	border:2px solid var(--blue);
	opacity:.9;
	border-radius:50%;
	animation: rotate 3s linear infinite;
}

@keyframes rotate{
	100%{
		transform:rotate3D(1,0.25,0.75,360deg);
	}
}

@keyframes spin{
	to{
		transform:rotateZ(360deg);
	}
}

@keyframes spinner{
	to{
		transform:rotateZ(-360deg);
	}
}