.loader{
            width: 30%;
            height: 300px;
            float: left;
            border:1px solid #ccc;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loading-1{
            width: 40px;
            height: 30px;
        }
        .loading-1 i{
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50px;
            background: linear-gradient(transparent 0%,transparent 70%,black 30%,black 100%);
            animation: loading1 .6s linear 0s infinite;
        }
        @keyframes loading1 {
            0%{transform: rotate(0deg)}
            50%{transform:rotate(180deg)}
            100%{transform:rotate(360deg)}
        }
        .loading-2{
            width: 40px;
			margin:0 auto;
			margin-left:47%;
        }
        .loading-2 i{
            display:block;
            border-radius: 5px;
            width: 3px;
            height: 26px;
            margin:0 5px;
            background: #5c49b6;
            float: left;
        }
        .loading-2 i:nth-child(1){
            animation: loading2 1s ease-in 0s infinite ;
        }
        .loading-2 i:nth-child(2){
            animation: loading2 1s ease-in .12s infinite ;
        }
        .loading-2 i:nth-child(3){
             animation: loading2 1s ease-in .24s infinite ;
        }
        .loading-2 i:nth-child(4){
            animation: loading2 1s ease-in .36s infinite ;
        }
        .loading-2 i:nth-child(5){
            animation: loading2 1s ease-in .48s infinite ;
        }
        @keyframes loading2 {
            0%{transform: scaleY(1)}
            50%{transform:scaleY(.4)}
            100%{transform: scaleY(1)}
        }
        .loading-3{
            width: 20px;
            height: 20px;
            position: relative;
            animation: loading1 2s linear 0s infinite;
        }
        .loading-3 i{
            width: 20px;
            height: 20px;
            display: block;
            position: absolute;
            background: black;
            border-radius: 20px;
        }
        .loading-3 i:nth-child(1){
            top: -30px;
            animation: loading3 .6s ease 0s infinite;
        }
        .loading-3 i:nth-child(2){
            left: 30px;
            animation: loading3 .6s ease .15s infinite;
        }
        .loading-3 i:nth-child(3){
            top: 30px;
            animation: loading3 .6s ease .3s infinite;
        }
        .loading-3 i:nth-child(4){
            left: -30px;
            animation: loading3 .6s ease .45s infinite;
        }
        @keyframes loading3 {
            0%{transform: scale(1); opacity: 1}
            50%{transform: scale(.4); opacity: .3}
            100%{transform: scale(1); opacity: 1}
        }
        .loading-4{
            width: 50px;
            height: 50px;
            position: relative;
        }
        .loading-4 i{
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background-color: black;
            position: absolute;
            opacity:0;
        }
        .loading-4 i:nth-child(1){
            animation:loading4 1s linear 0s infinite;
        }
        .loading-4 i:nth-child(2){
            animation:loading4 1s linear .3s infinite;
        }
        .loading-4 i:nth-child(3){
            animation:loading4 1s linear .6s infinite;
        }
        @keyframes loading4{
            0%{transform: scale(0);opacity: 0}
            5%{opacity: 1}
            100%{transform: scale(1);opacity: 0}
        }
        .loading-5{
            position: relative;
        }
        .loading-5 i{
            display: block;
            border: 2px solid;
            border-radius: 50px;
            border-color: transparent black;
            position: absolute;
        }
        .loading-5 i:nth-child(1){
            width: 30px;
            height: 30px;
            top: -25px;
            left: -25px;
            animation: loading5 1s ease-in 0.5s infinite;
        }
        .loading-5 i:nth-child(2){
            width: 30px;
            height: 30px;
            top: -15px;
            left: -15px;
            animation: loading5 1s ease-out 0s infinite reverse;
        }
        @keyframes loading5 {
        0%{transform: rotate(0deg) scale(1)}
        50%{transform: rotate(180deg) scale(1.2)}
        100%{transform: rotate(360deg) scale(1)}
        }