.spinner-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.spinner {
    top: 50%;
    width: 50%;
    -moz-animation: rotate 1s infinite linear;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    position: relative;
    display: block;
    margin: auto;
}

div.spinner i {
    -moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    -webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    -moz-transform-origin: 50% 100% 0;
    -webkit-transform-origin: 50% 100% 0;
    transform-origin: 50% 100% 0;
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    border: solid 10px transparent;
    border-bottom: none;
}

div.spinner i:nth-child(1) {
    -moz-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
    animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
    width: 222px;
    height: 111px;
    margin-top: -111px;
    margin-left: -111px;
    border-color: #2172b8;
    border-top-left-radius: 210px;
    border-top-right-radius: 210px;
}

div.spinner i:nth-child(2) {
    -moz-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
    animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
    width: 244px;
    height: 122px;
    margin-top: -122px;
    margin-left: -122px;
    border-color: #18a39b;
    border-top-left-radius: 220px;
    border-top-right-radius: 220px;
}

div.spinner i:nth-child(3) {
    -moz-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
    animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
    width: 266px;
    height: 133px;
    margin-top: -133px;
    margin-left: -133px;
    border-color: #82c545;
    border-top-left-radius: 230px;
    border-top-right-radius: 230px;
}

div.spinner i:nth-child(4) {
    -moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    width: 288px;
    height: 144px;
    margin-top: -144px;
    margin-left: -144px;
    border-color: #f8b739;
    border-top-left-radius: 240px;
    border-top-right-radius: 240px;
}

div.spinner i:nth-child(5) {
    -moz-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
    animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
    width: 310px;
    height: 155px;
    margin-top: -155px;
    margin-left: -155px;
    border-color: #f06045;
    border-top-left-radius: 250px;
    border-top-right-radius: 250px;
}

div.spinner i:nth-child(6) {
    -moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    width: 332px;
    height: 166px;
    margin-top: -166px;
    margin-left: -166px;
    border-color: #ed2861;
    border-top-left-radius: 260px;
    border-top-right-radius: 260px;
}

div.spinner i:nth-child(7) {
    -moz-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
    animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
    width: 354px;
    height: 177px;
    margin-top: -177px;
    margin-left: -177px;
    border-color: #c12680;
    border-top-left-radius: 270px;
    border-top-right-radius: 270px;
}

div.spinner i:nth-child(8) {
    -moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    width: 376px;
    height: 188px;
    margin-top: -188px;
    margin-left: -188px;
    border-color: #5d3191;
    border-top-left-radius: 280px;
    border-top-right-radius: 280px;
}

@-moz-keyframes rotate {
    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}