I would like to transfer some CSS styles from the site to the application in order to have a similar design. I tried to create a GIF animation waiting for an uncontrollable process, but it turns out quite weighty and not smooth. In addition, the background is not transparent, as in the original.
The question itself. Is it possible to implement this in WPF and how difficult is it?
.eldr { background-color: Black; padding-top: 40px; height: 120px; } .circle { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,174,255,0.9); opacity: .9; border-right: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 35px #2187e7; width: 50px; height: 50px; margin: 0 auto; -webkit-animation: spinPulse 1s infinite linear; } .circle1 { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,174,255,0.9); opacity: .9; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0); border-radius: 50px; box-shadow: 0 0 15px #2187e7; width: 30px; height: 30px; margin: 0 auto; position: relative; top: -50px; -webkit-animation: spinoffPulse 1s infinite linear; } @-webkit-keyframes spinPulse { 0% { -webkit-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7; } 50% { -webkit-transform: rotate(145deg); opacity: 1; } 100% { -webkit-transform: rotate(-320deg); opacity: 0; }; } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; } <div class="eldr"> <div class="circle"></div> <div class="circle1"></div> </div> 