Template:CurrentStatus/style.css

.ani{
	Background:black;
    Height:30px;
    Width:30px;
    Transform-origin:center;
    Border-radius:100%;
    Transition:10s;
    Display:inline-block;
    Justify-content:center;
    Align-items:center;
    Position:relative;
    animation :ani 5s   linear infinite;
}
.ani2{
    Height:96%;
    Width:96%;
    Border-radius:100%;	
    Transform-origin:center;
    Display:flex;
    Justify-content:center;
    Align-items:center;
    animation :anim3 4s   linear infinite;
}
@keyframes ani{
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
    0%{
        transition: 100s ;
        color: white ;
        border:solid 1px red;
    }
    25%{
        transition: 100s ;
        color: white ;
        border:solid 1px blueviolet;
        background:deeppink;
    }
    50%{
        transition: 100s;
        border:solid 1px green;
        Background:black;
    }
    100%{
       transition: 100s ;
       border: solid 1px green;
       background:aqua;
    }
}
.anim{
	background:aqua;
	Border-radius:100%;
	Height:4px;
	Width:4px;
	position:absolute;
	right:50%;
	animation :ani3 2s   linear infinite;
	Transform-origin:center;
}
@keyframes anim3{
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
     0%{
        transition: 50s ;
        Background:black;
    }
    25%{
        transition: 100s ;
        background:white;
    }
    50%{
        transition: 50s;
        Background:black;
    }
    100%{
        transition: 100s ;
        background:white;
    }
}

.aniof{
	Background:red;
    Height:28px;
    Width:29px;
    Transform-origin:center;
    Border-radius:100%;
    Transition:10s;
    display:inline-block; 
    justify-content:center;
    align-items:center;
    padding-bottom:2px;
}
.ani2of{
    display:flex; 
    justify-content:center;
    align-items:center;
    Height:100%;
    Width:100%;
}

.an{
    display:inline-block; 
    Text-align:center;
    justify-content:center;
    align-items:center;
   /* Height:100%;
    Width:100%;*/
    animation :an 10s   linear infinite;
}
@keyframes an{
    from {
        transform:rotate(0deg);
        Transition:100s;
    }
    to {
        transform:rotate(360deg);
        Transition:100s;
    }
}