[css] code

Viewer

  1. .container {
  2.   display: flex;
  3.   align-items: center;
  4.   justify-content: center;
  5.   min-height: 100vh;
  6.   background-color: #ededed;
  7. }
  8. .loader {
  9.   max-width: 15rem;
  10.   width: 100%;
  11.   height: auto;
  12.   stroke-linecap: round;
  13. }
  14. circle {
  15.   fill: none;
  16.   stroke-width: 3.5;
  17.   -webkit-animation-name: preloader;
  18.   animation-name: preloader;
  19.   -webkit-animation-duration: 3s;
  20.   animation-duration: 3s;
  21.   -webkit-animation-iteration-count: infinite;
  22.   animation-iteration-count: infinite;
  23.   -webkit-animation-timing-function: ease-in-out;
  24.   animation-timing-function: ease-in-out;
  25.   transform-origin: 170px 170px;
  26.   will-change: transform;
  27. }
  28. circle:nth-of-type(1) {
  29.   stroke-dasharray: 550px;
  30. }
  31. circle:nth-of-type(2) {
  32.   stroke-dasharray: 500px;
  33. }
  34. circle:nth-of-type(3) {
  35.   stroke-dasharray: 450px;
  36. }
  37. circle:nth-of-type(4) {
  38.   stroke-dasharray: 300px;
  39. }
  40. circle:nth-of-type(1) {
  41.   -webkit-animation-delay: -0.15s;
  42.   animation-delay: -0.15s;
  43. }
  44. circle:nth-of-type(2) {
  45.   -webkit-animation-delay: -0.3s;
  46.   animation-delay: -0.3s;
  47. }
  48. circle:nth-of-type(3) {
  49.   -webkit-animation-delay: -0.45s;
  50.   animation-delay: -0.45s;
  51. }
  52. circle:nth-of-type(4) {
  53.   -webkit-animation-delay: -0.6s;
  54.   animation-delay: -0.6s;
  55. }
  56. @-webkit-keyframes preloader {
  57.   50% {
  58.     transform: rotate(360deg);
  59.   }
  60. }
  61. @keyframes preloader {
  62.   50% {
  63.     transform: rotate(360deg);
  64.   }
  65. }
  66.  

Editor

You can edit this paste and save as new:


File Description
  • code
  • Paste Code
  • 14 Jun-2021
  • 1.37 Kb
You can Share it: