[css] code
Viewer
- .container {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background-color: #ededed;
- }
- .loader {
- max-width: 15rem;
- width: 100%;
- height: auto;
- stroke-linecap: round;
- }
- circle {
- fill: none;
- stroke-width: 3.5;
- -webkit-animation-name: preloader;
- animation-name: preloader;
- -webkit-animation-duration: 3s;
- animation-duration: 3s;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- transform-origin: 170px 170px;
- will-change: transform;
- }
- circle:nth-of-type(1) {
- stroke-dasharray: 550px;
- }
- circle:nth-of-type(2) {
- stroke-dasharray: 500px;
- }
- circle:nth-of-type(3) {
- stroke-dasharray: 450px;
- }
- circle:nth-of-type(4) {
- stroke-dasharray: 300px;
- }
- circle:nth-of-type(1) {
- -webkit-animation-delay: -0.15s;
- animation-delay: -0.15s;
- }
- circle:nth-of-type(2) {
- -webkit-animation-delay: -0.3s;
- animation-delay: -0.3s;
- }
- circle:nth-of-type(3) {
- -webkit-animation-delay: -0.45s;
- animation-delay: -0.45s;
- }
- circle:nth-of-type(4) {
- -webkit-animation-delay: -0.6s;
- animation-delay: -0.6s;
- }
- @-webkit-keyframes preloader {
- 50% {
- transform: rotate(360deg);
- }
- }
- @keyframes preloader {
- 50% {
- transform: rotate(360deg);
- }
- }
Editor
You can edit this paste and save as new: