Animation Border
<!DOCTYPE html> <html> <head> <title>Loader</title> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> <h2>Loading.......</h2> </div> </body> </html> <style type="text/css"> *{margin: 0px; padding: 0px; box-sizing: border-box;} body{background-color: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh;} .loader{position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center;} .loader span{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #fff; pointer-events: none; animation: animate 5s linear infinite;} .loader h2{color: #fff; font-family: consolas; font-weight: 600;} .loader span:nth-child(1){ border-radius: 38% 62% 68% 32% / 28% 34% 66% 72%; } .loader span:nth-child(2){ animation-direc...