Loaders/Play Loader.html

<html>
  <head>
    <title>Play Loader | Loaders</title>
    <style>
      body{
        background-color: #000;
      }

      #play-loader{
        width: 100px;
        height:100px;
        border: 1px solid #000;
        margin: 0 auto;
        position:relative;
        margin-top:10%;
        overflow: hidden;
        background-image: linear-gradient(to top right, transparent 74%, rgb(0,0,0) 74%), linear-gradient(to top left,rgb(0,0,0) 26%, transparent 26%);
        background-size: 207% 105%;
        background-position: right bottom, right top;
        background-repeat: no-repeat;
      }

      #play-loader::before{
        content: '';
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 100%;
        top: -29px;
        left: -32px;
        background-color: white;
        background: linear-gradient(36deg, #fff 50%, transparent 50%) 0 0;
        background-repeat: no-repeat;
        background-size: 50% 50%;
        animation: load 0.5s linear 0s infinite;
        z-index: -1;
      }

      #play-loader::after{
        content:'\25B6';
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 2px;
        font-size: 122px;
        top: -34px;
      }

      @keyframes load{
        0%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="play-loader"></div>
  </body>
</html>