Прелоадер для аякса

Preloader

    <div id="myPreloader" class="wrap-myLoader cansel">
        <div class="myLoader"></div>
    </div>




            beforeSend: function() {
                $('#myPreloader').removeClass('cansel');
            },





.wrap-myLoader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #424242;
    z-index: 51;
    transition: 0.5s all;
    opacity: 0.8;
    visibility: visible;
}

.myLoader {
    position: absolute;
    left: 49%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border: 10px solid white;
    /* border-top-color: #0ca70c; */
    border-top-color: #000;
    border-radius: 50%;
    animation: 1s myAnim linear infinite;
}

.cansel {
    opacity: 0;
    visibility: hidden;
}

.cansel .myLoader  {
    animation-play-state: paused;
}

@keyframes myAnim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}













	<style>
    body {
      margin: 0;
    }

    .preloader {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		/* фоновый цвет */
		z-index: 1001;
    }

    .preloader__image {
		position: relative;
		top: 50%;
		left: 50%;
		width: 70px;
		height: 70px;
		margin-top: -35px;
		margin-left: -35px;
		text-align: center;
		animation: preloader-rotate 2s infinite linear;
    }

    @keyframes preloader-rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    .loaded_hiding .preloader {
		transition: 0.3s opacity;
		opacity: 0;
    }

    .loaded .preloader {
		display: none;
    }
  </style>