.loader{ width: 142px; height: 142px; padding: 0; margin: 30px auto; list-style: none; position: relative; animation: rotate 10s infinite linear; } .loader li{ border: 6px solid transparent; border-bottom: none; transform-origin: 50% 100% 0; position: absolute; top: 50%; left: 50%; animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03); } .loader li:nth-child(1){ width: 44px; height: 22px; margin: -22px 0 0 -22px; border-color: #2172b8; border-top-left-radius: 36px; border-top-right-radius: 36px; animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03); } .loader li:nth-child(2){ width: 58px; height: 29px; margin: -29px 0 0 -29px; border-color: #18a39b; border-top-left-radius: 42px; border-top-right-radius: 42px; animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03); } .loader li:nth-child(3){ width: 72px; height: 36px; margin: -36px 0 0 -36px; border-color: #82c545; border-top-left-radius: 48px; border-top-right-radius: 48px; animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03); } .loader li:nth-child(4){ width: 86px; height: 43px; margin: -43px 0 0 -43px; border-color: #f8b739; border-top-left-radius: 54px; border-top-right-radius: 54px; animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03); } .loader li:nth-child(5){ width: 100px; height: 50px; margin: -50px 0 0 -50px; border-color: #f06045; border-top-left-radius: 60px; border-top-right-radius: 60px; animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03); } .loader li:nth-child(6){ width: 114px; height: 57px; margin: -57px 0 0 -57px; border-color: #ed2861; border-top-left-radius: 66px; border-top-right-radius: 66px; animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03); } .loader li:nth-child(7){ width: 128px; height: 64px; margin: -64px 0 0 -64px; border-color: #c12680; border-top-left-radius: 72px; border-top-right-radius: 72px; animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03); } @keyframes rotate{ 100%{ transform: rotate(360deg); } }