Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="flex flex-row items-center justify-center min-h-screen bg-gray-200">
  <div class="flex relative min-h-full step-1">
    <svg width="196" height="74" viewBox="0 0 196 74" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d)">
    <path class="loading-bg" fill-rule="evenodd" clip-rule="evenodd" d="M8 11C8 8.79086 9.79086 7 12 7H168.547C169.966 7 171.279 7.75213 171.997 8.97644L186.617 33.9041C187.35 35.1537 187.35 36.7017 186.617 37.9513L171.997 62.8789C171.279 64.1033 169.966 64.8554 168.547 64.8554H12C9.79085 64.8554 8 63.0645 8 60.8554V11Z" fill="var(--loading-bg)"/>
    <path class="loading-border" d="M9 11C9 9.34315 10.3431 8 12 8H168.547C169.611 8 170.596 8.5641 171.135 9.48234L185.754 34.41C186.304 35.3472 186.304 36.5082 185.754 37.4454L171.135 62.3731C170.596 63.2913 169.611 63.8554 168.547 63.8554H12C10.3431 63.8554 9 62.5122 9 60.8554V11Z" stroke="var(--loading-border)" stroke-width="2"/>
      
    </g>
    <defs>
    <filter id="filter0_d" x="0" y="0" width="195.166" height="73.8554" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
    <feOffset dy="1"/>
    <feGaussianBlur stdDeviation="4"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    </defs>
    
    </svg>
        <svg class="center-icon absolute z-10 loading-icon" width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.9441 32.3188C25.8509 32.3188 33.0713 25.0984 33.0713 16.1916C33.0713 7.28484 25.8509 0.0644531 16.9441 0.0644531C8.03728 0.0644531 0.816895 7.28484 0.816895 16.1916C0.816895 25.0984 8.03728 32.3188 16.9441 32.3188Z" fill="var(--loading-border)"/>
  <path d="M10.1677 19.0201C10.0029 19.0201 9.84499 18.9489 9.73434 18.8244L7.43537 16.5262C7.32549 16.4171 7.26514 16.2708 7.26514 16.116C7.26514 15.9613 7.32549 15.815 7.43537 15.7059C7.54448 15.5961 7.69073 15.5357 7.84549 15.5357C8.00025 15.5357 8.1465 15.5961 8.2556 15.7059L9.58654 17.0369V16.6972C9.58809 14.6133 10.5105 12.6571 12.1169 11.3308C13.3805 10.2878 14.9095 9.73682 16.5399 9.73682C16.7628 9.73682 16.9895 9.74765 17.2131 9.76854C19.0656 9.94574 20.737 10.8325 21.9217 12.2672C22.02 12.3863 22.0664 12.5372 22.0517 12.692C22.037 12.8467 21.9627 12.986 21.8436 13.0843C21.7399 13.1702 21.6091 13.2174 21.4745 13.2174C21.3004 13.2174 21.1371 13.1408 21.0264 13.0061C20.0398 11.8106 18.6462 11.0716 17.1033 10.9238C16.916 10.906 16.7256 10.8967 16.5392 10.8967C15.1827 10.8967 13.9098 11.3564 12.8566 12.2254C11.5172 13.3311 10.7488 14.9608 10.748 16.6972V17.0369L12.079 15.7059C12.1888 15.5961 12.3343 15.5357 12.4891 15.5357C12.6438 15.5357 12.7901 15.5961 12.8992 15.7059C13.0091 15.815 13.0694 15.9613 13.0694 16.116C13.0694 16.2708 13.0091 16.4171 12.8992 16.5262L10.5886 18.8367C10.4903 18.9489 10.3325 19.0201 10.1677 19.0201Z" fill="white"/>
  <path d="M16.5572 23.6596C16.4883 23.6596 16.4202 23.6588 16.3506 23.6565C14.4911 23.6023 12.764 22.8277 11.4872 21.4751C11.3804 21.3622 11.3247 21.2151 11.3294 21.0604C11.334 20.9056 11.3982 20.7617 11.5112 20.6549C11.6195 20.5528 11.7612 20.4971 11.9097 20.4971C12.0691 20.4971 12.2231 20.5636 12.3322 20.6789C13.3962 21.8063 14.8355 22.4517 16.3846 22.4966C16.4396 22.4981 16.4953 22.4989 16.5502 22.4989C18.039 22.4989 19.4543 21.9363 20.5353 20.9165C21.6318 19.8819 22.2849 18.4449 22.3499 16.9422L21.0243 18.2677C20.9145 18.3776 20.769 18.438 20.6142 18.438C20.4595 18.438 20.3132 18.3776 20.2041 18.2677C19.9782 18.0418 19.9782 17.6734 20.2041 17.4467L22.5255 15.1253C22.5797 15.0711 22.6439 15.0286 22.7151 14.9992C22.7205 14.9969 22.7275 14.9945 22.7337 14.9922C22.7964 14.9682 22.866 14.9551 22.9356 14.9551C23.0045 14.9551 23.0718 14.9675 23.1376 14.9922C23.1461 14.9953 23.1546 14.9984 23.1624 15.0015C23.2281 15.0286 23.2916 15.0711 23.3465 15.1253L25.6679 17.4467C25.8939 17.6727 25.8939 18.041 25.6679 18.2677C25.5581 18.3776 25.4126 18.438 25.2578 18.438C25.1031 18.438 24.9568 18.3776 24.8477 18.2677L23.5129 16.9329C23.4494 18.7568 22.6633 20.5048 21.3323 21.7607C20.0339 22.9848 18.3385 23.6596 16.5572 23.6596Z" fill="white"/>
  
    </svg>
  <svg class="center-icon absolute z-0 done-icon" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.8459 32.3188C25.7527 32.3188 32.9731 25.0984 32.9731 16.1916C32.9731 7.28484 25.7527 0.0644531 16.8459 0.0644531C7.93913 0.0644531 0.71875 7.28484 0.71875 16.1916C0.71875 25.0984 7.93913 32.3188 16.8459 32.3188Z" fill="#008009"/>
    <path d="M14.0955 21.8048L14.0964 21.8057L14.8747 21.626V22.126H14.8751H14.917H14.9357L14.9543 22.1246C15.1121 22.1128 15.2654 22.0673 15.4041 21.991C15.5423 21.915 15.6626 21.8103 15.757 21.6839C15.7573 21.6836 15.7576 21.6832 15.7578 21.6828L23.0283 12.023C23.1207 11.9115 23.1903 11.783 23.233 11.6445C23.2776 11.5003 23.2921 11.3485 23.2758 11.1985L22.78 11.2526L23.2758 11.1985C23.2594 11.0485 23.2124 10.9034 23.1378 10.7722C23.0631 10.641 22.9624 10.5265 22.8418 10.4358C22.7212 10.345 22.5833 10.28 22.4365 10.2446C22.2898 10.2092 22.1374 10.2043 21.9887 10.2302C21.84 10.256 21.6982 10.312 21.572 10.3948C21.4508 10.4743 21.3466 10.5767 21.2651 10.6963L14.7542 19.3445L10.702 15.3073C10.6046 15.2004 10.4871 15.1136 10.3561 15.0519C10.2195 14.9875 10.0711 14.9518 9.92007 14.947C9.76907 14.9423 9.61871 14.9685 9.47827 15.0242C9.33783 15.0799 9.21031 15.1638 9.10358 15.2707C8.99685 15.3776 8.91319 15.5053 8.85777 15.6458C8.80235 15.7863 8.77635 15.9368 8.78137 16.0877C8.7864 16.2387 8.82234 16.3871 8.88698 16.5236C8.94899 16.6546 9.03616 16.7721 9.14345 16.8693L14.0955 21.8048Z" fill="white" stroke="white"/>
        
    </svg>
  </div>
  <div class="flex min-h-full relative step-2">
    <svg width="193" height="74" viewBox="0 0 193 74" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d)">
    <path class="loading-bg" fill-rule="evenodd" clip-rule="evenodd" d="M8.59941 13.0128C7.04663 10.3462 8.97029 7 12.0561 7H165.645C167.064 7 168.377 7.75213 169.096 8.97644L183.715 33.9041C184.448 35.1537 184.448 36.7017 183.715 37.9513L169.096 62.8789C168.377 64.1033 167.064 64.8554 165.645 64.8554H12.0561C8.97028 64.8554 7.04663 61.5092 8.59941 58.8426L20.7707 37.9405C21.4951 36.6964 21.4951 35.159 20.7707 33.9149L8.59941 13.0128Z" fill="var(--loading-bg)"/>
    <path class="loading-border" d="M9.46358 12.5096C8.29899 10.5096 9.74174 8 12.0561 8H165.645C166.71 8 167.694 8.5641 168.233 9.48234L182.852 34.41C183.402 35.3472 183.402 36.5082 182.852 37.4454L168.233 62.3731C167.694 63.2913 166.71 63.8554 165.645 63.8554H12.0561C9.74173 63.8554 8.29899 61.3458 9.46358 59.3458L21.6349 38.4437C22.5404 36.8886 22.5404 34.9668 21.6349 33.4117L9.46358 12.5096Z" stroke="var(--loading-border)" stroke-width="2"/>
    </g>
    <defs>
    <filter id="filter0_d" x="0.050293" y="0" width="192.214" height="73.8554" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
    <feOffset dy="1"/>
    <feGaussianBlur stdDeviation="4"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    </defs>
    </svg>
    <svg class="center-icon absolute z-10 loading-icon" width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.9441 32.3188C25.8509 32.3188 33.0713 25.0984 33.0713 16.1916C33.0713 7.28484 25.8509 0.0644531 16.9441 0.0644531C8.03728 0.0644531 0.816895 7.28484 0.816895 16.1916C0.816895 25.0984 8.03728 32.3188 16.9441 32.3188Z" fill="var(--loading-border)"/>
  <path d="M10.1677 19.0201C10.0029 19.0201 9.84499 18.9489 9.73434 18.8244L7.43537 16.5262C7.32549 16.4171 7.26514 16.2708 7.26514 16.116C7.26514 15.9613 7.32549 15.815 7.43537 15.7059C7.54448 15.5961 7.69073 15.5357 7.84549 15.5357C8.00025 15.5357 8.1465 15.5961 8.2556 15.7059L9.58654 17.0369V16.6972C9.58809 14.6133 10.5105 12.6571 12.1169 11.3308C13.3805 10.2878 14.9095 9.73682 16.5399 9.73682C16.7628 9.73682 16.9895 9.74765 17.2131 9.76854C19.0656 9.94574 20.737 10.8325 21.9217 12.2672C22.02 12.3863 22.0664 12.5372 22.0517 12.692C22.037 12.8467 21.9627 12.986 21.8436 13.0843C21.7399 13.1702 21.6091 13.2174 21.4745 13.2174C21.3004 13.2174 21.1371 13.1408 21.0264 13.0061C20.0398 11.8106 18.6462 11.0716 17.1033 10.9238C16.916 10.906 16.7256 10.8967 16.5392 10.8967C15.1827 10.8967 13.9098 11.3564 12.8566 12.2254C11.5172 13.3311 10.7488 14.9608 10.748 16.6972V17.0369L12.079 15.7059C12.1888 15.5961 12.3343 15.5357 12.4891 15.5357C12.6438 15.5357 12.7901 15.5961 12.8992 15.7059C13.0091 15.815 13.0694 15.9613 13.0694 16.116C13.0694 16.2708 13.0091 16.4171 12.8992 16.5262L10.5886 18.8367C10.4903 18.9489 10.3325 19.0201 10.1677 19.0201Z" fill="white"/>
  <path d="M16.5572 23.6596C16.4883 23.6596 16.4202 23.6588 16.3506 23.6565C14.4911 23.6023 12.764 22.8277 11.4872 21.4751C11.3804 21.3622 11.3247 21.2151 11.3294 21.0604C11.334 20.9056 11.3982 20.7617 11.5112 20.6549C11.6195 20.5528 11.7612 20.4971 11.9097 20.4971C12.0691 20.4971 12.2231 20.5636 12.3322 20.6789C13.3962 21.8063 14.8355 22.4517 16.3846 22.4966C16.4396 22.4981 16.4953 22.4989 16.5502 22.4989C18.039 22.4989 19.4543 21.9363 20.5353 20.9165C21.6318 19.8819 22.2849 18.4449 22.3499 16.9422L21.0243 18.2677C20.9145 18.3776 20.769 18.438 20.6142 18.438C20.4595 18.438 20.3132 18.3776 20.2041 18.2677C19.9782 18.0418 19.9782 17.6734 20.2041 17.4467L22.5255 15.1253C22.5797 15.0711 22.6439 15.0286 22.7151 14.9992C22.7205 14.9969 22.7275 14.9945 22.7337 14.9922C22.7964 14.9682 22.866 14.9551 22.9356 14.9551C23.0045 14.9551 23.0718 14.9675 23.1376 14.9922C23.1461 14.9953 23.1546 14.9984 23.1624 15.0015C23.2281 15.0286 23.2916 15.0711 23.3465 15.1253L25.6679 17.4467C25.8939 17.6727 25.8939 18.041 25.6679 18.2677C25.5581 18.3776 25.4126 18.438 25.2578 18.438C25.1031 18.438 24.9568 18.3776 24.8477 18.2677L23.5129 16.9329C23.4494 18.7568 22.6633 20.5048 21.3323 21.7607C20.0339 22.9848 18.3385 23.6596 16.5572 23.6596Z" fill="white"/>
  
    </svg>
  <svg class="center-icon absolute z-0 done-icon" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.8459 32.3188C25.7527 32.3188 32.9731 25.0984 32.9731 16.1916C32.9731 7.28484 25.7527 0.0644531 16.8459 0.0644531C7.93913 0.0644531 0.71875 7.28484 0.71875 16.1916C0.71875 25.0984 7.93913 32.3188 16.8459 32.3188Z" fill="#008009"/>
    <path d="M14.0955 21.8048L14.0964 21.8057L14.8747 21.626V22.126H14.8751H14.917H14.9357L14.9543 22.1246C15.1121 22.1128 15.2654 22.0673 15.4041 21.991C15.5423 21.915 15.6626 21.8103 15.757 21.6839C15.7573 21.6836 15.7576 21.6832 15.7578 21.6828L23.0283 12.023C23.1207 11.9115 23.1903 11.783 23.233 11.6445C23.2776 11.5003 23.2921 11.3485 23.2758 11.1985L22.78 11.2526L23.2758 11.1985C23.2594 11.0485 23.2124 10.9034 23.1378 10.7722C23.0631 10.641 22.9624 10.5265 22.8418 10.4358C22.7212 10.345 22.5833 10.28 22.4365 10.2446C22.2898 10.2092 22.1374 10.2043 21.9887 10.2302C21.84 10.256 21.6982 10.312 21.572 10.3948C21.4508 10.4743 21.3466 10.5767 21.2651 10.6963L14.7542 19.3445L10.702 15.3073C10.6046 15.2004 10.4871 15.1136 10.3561 15.0519C10.2195 14.9875 10.0711 14.9518 9.92007 14.947C9.76907 14.9423 9.61871 14.9685 9.47827 15.0242C9.33783 15.0799 9.21031 15.1638 9.10358 15.2707C8.99685 15.3776 8.91319 15.5053 8.85777 15.6458C8.80235 15.7863 8.77635 15.9368 8.78137 16.0877C8.7864 16.2387 8.82234 16.3871 8.88698 16.5236C8.94899 16.6546 9.03616 16.7721 9.14345 16.8693L14.0955 21.8048Z" fill="white" stroke="white"/>
        
    </svg>
  </div>
   <div class="flex relative min-h-full step-3">
    <svg width="193" height="74" viewBox="0 0 193 74" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d)">
    <path class="loading-bg" fill-rule="evenodd" clip-rule="evenodd" d="M8.59941 13.0128C7.04663 10.3462 8.97029 7 12.0561 7H165.645C167.064 7 168.377 7.75213 169.096 8.97644L183.715 33.9041C184.448 35.1537 184.448 36.7017 183.715 37.9513L169.096 62.8789C168.377 64.1033 167.064 64.8554 165.645 64.8554H12.0561C8.97028 64.8554 7.04663 61.5092 8.59941 58.8426L20.7707 37.9405C21.4951 36.6964 21.4951 35.159 20.7707 33.9149L8.59941 13.0128Z" fill="var(--loading-bg)"/>
    <path class="loading-border" d="M9.46358 12.5096C8.29899 10.5096 9.74174 8 12.0561 8H165.645C166.71 8 167.694 8.5641 168.233 9.48234L182.852 34.41C183.402 35.3472 183.402 36.5082 182.852 37.4454L168.233 62.3731C167.694 63.2913 166.71 63.8554 165.645 63.8554H12.0561C9.74173 63.8554 8.29899 61.3458 9.46358 59.3458L21.6349 38.4437C22.5404 36.8886 22.5404 34.9668 21.6349 33.4117L9.46358 12.5096Z" stroke="var(--loading-border)" stroke-width="2"/>
    </g>
    <defs>
    <filter id="filter0_d" x="0.050293" y="0" width="192.214" height="73.8554" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
    <feOffset dy="1"/>
    <feGaussianBlur stdDeviation="4"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    </defs>
    </svg>
        <svg class="center-icon absolute z-10 loading-icon" width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.9441 32.3188C25.8509 32.3188 33.0713 25.0984 33.0713 16.1916C33.0713 7.28484 25.8509 0.0644531 16.9441 0.0644531C8.03728 0.0644531 0.816895 7.28484 0.816895 16.1916C0.816895 25.0984 8.03728 32.3188 16.9441 32.3188Z" fill="var(--loading-border)"/>
  <path d="M10.1677 19.0201C10.0029 19.0201 9.84499 18.9489 9.73434 18.8244L7.43537 16.5262C7.32549 16.4171 7.26514 16.2708 7.26514 16.116C7.26514 15.9613 7.32549 15.815 7.43537 15.7059C7.54448 15.5961 7.69073 15.5357 7.84549 15.5357C8.00025 15.5357 8.1465 15.5961 8.2556 15.7059L9.58654 17.0369V16.6972C9.58809 14.6133 10.5105 12.6571 12.1169 11.3308C13.3805 10.2878 14.9095 9.73682 16.5399 9.73682C16.7628 9.73682 16.9895 9.74765 17.2131 9.76854C19.0656 9.94574 20.737 10.8325 21.9217 12.2672C22.02 12.3863 22.0664 12.5372 22.0517 12.692C22.037 12.8467 21.9627 12.986 21.8436 13.0843C21.7399 13.1702 21.6091 13.2174 21.4745 13.2174C21.3004 13.2174 21.1371 13.1408 21.0264 13.0061C20.0398 11.8106 18.6462 11.0716 17.1033 10.9238C16.916 10.906 16.7256 10.8967 16.5392 10.8967C15.1827 10.8967 13.9098 11.3564 12.8566 12.2254C11.5172 13.3311 10.7488 14.9608 10.748 16.6972V17.0369L12.079 15.7059C12.1888 15.5961 12.3343 15.5357 12.4891 15.5357C12.6438 15.5357 12.7901 15.5961 12.8992 15.7059C13.0091 15.815 13.0694 15.9613 13.0694 16.116C13.0694 16.2708 13.0091 16.4171 12.8992 16.5262L10.5886 18.8367C10.4903 18.9489 10.3325 19.0201 10.1677 19.0201Z" fill="white"/>
  <path d="M16.5572 23.6596C16.4883 23.6596 16.4202 23.6588 16.3506 23.6565C14.4911 23.6023 12.764 22.8277 11.4872 21.4751C11.3804 21.3622 11.3247 21.2151 11.3294 21.0604C11.334 20.9056 11.3982 20.7617 11.5112 20.6549C11.6195 20.5528 11.7612 20.4971 11.9097 20.4971C12.0691 20.4971 12.2231 20.5636 12.3322 20.6789C13.3962 21.8063 14.8355 22.4517 16.3846 22.4966C16.4396 22.4981 16.4953 22.4989 16.5502 22.4989C18.039 22.4989 19.4543 21.9363 20.5353 20.9165C21.6318 19.8819 22.2849 18.4449 22.3499 16.9422L21.0243 18.2677C20.9145 18.3776 20.769 18.438 20.6142 18.438C20.4595 18.438 20.3132 18.3776 20.2041 18.2677C19.9782 18.0418 19.9782 17.6734 20.2041 17.4467L22.5255 15.1253C22.5797 15.0711 22.6439 15.0286 22.7151 14.9992C22.7205 14.9969 22.7275 14.9945 22.7337 14.9922C22.7964 14.9682 22.866 14.9551 22.9356 14.9551C23.0045 14.9551 23.0718 14.9675 23.1376 14.9922C23.1461 14.9953 23.1546 14.9984 23.1624 15.0015C23.2281 15.0286 23.2916 15.0711 23.3465 15.1253L25.6679 17.4467C25.8939 17.6727 25.8939 18.041 25.6679 18.2677C25.5581 18.3776 25.4126 18.438 25.2578 18.438C25.1031 18.438 24.9568 18.3776 24.8477 18.2677L23.5129 16.9329C23.4494 18.7568 22.6633 20.5048 21.3323 21.7607C20.0339 22.9848 18.3385 23.6596 16.5572 23.6596Z" fill="white"/>
  
    </svg>
  <svg class="center-icon absolute z-0 done-icon" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.8459 32.3188C25.7527 32.3188 32.9731 25.0984 32.9731 16.1916C32.9731 7.28484 25.7527 0.0644531 16.8459 0.0644531C7.93913 0.0644531 0.71875 7.28484 0.71875 16.1916C0.71875 25.0984 7.93913 32.3188 16.8459 32.3188Z" fill="#008009"/>
    <path d="M14.0955 21.8048L14.0964 21.8057L14.8747 21.626V22.126H14.8751H14.917H14.9357L14.9543 22.1246C15.1121 22.1128 15.2654 22.0673 15.4041 21.991C15.5423 21.915 15.6626 21.8103 15.757 21.6839C15.7573 21.6836 15.7576 21.6832 15.7578 21.6828L23.0283 12.023C23.1207 11.9115 23.1903 11.783 23.233 11.6445C23.2776 11.5003 23.2921 11.3485 23.2758 11.1985L22.78 11.2526L23.2758 11.1985C23.2594 11.0485 23.2124 10.9034 23.1378 10.7722C23.0631 10.641 22.9624 10.5265 22.8418 10.4358C22.7212 10.345 22.5833 10.28 22.4365 10.2446C22.2898 10.2092 22.1374 10.2043 21.9887 10.2302C21.84 10.256 21.6982 10.312 21.572 10.3948C21.4508 10.4743 21.3466 10.5767 21.2651 10.6963L14.7542 19.3445L10.702 15.3073C10.6046 15.2004 10.4871 15.1136 10.3561 15.0519C10.2195 14.9875 10.0711 14.9518 9.92007 14.947C9.76907 14.9423 9.61871 14.9685 9.47827 15.0242C9.33783 15.0799 9.21031 15.1638 9.10358 15.2707C8.99685 15.3776 8.91319 15.5053 8.85777 15.6458C8.80235 15.7863 8.77635 15.9368 8.78137 16.0877C8.7864 16.2387 8.82234 16.3871 8.88698 16.5236C8.94899 16.6546 9.03616 16.7721 9.14345 16.8693L14.0955 21.8048Z" fill="white" stroke="white"/>
        
    </svg>
  </div>
</main>
              
            
!

CSS

              
                :root {
  --done-bg: #F1FEF2;
  --done-border: #008009;
  --loading-bg: #E4F4FF;
  --loading-border: #0071C2;
  --timing: 1s;
  --delay: 0s;
  --repetition: 1;
}

/* --- --- --- */

.center-icon {
  height: 32px;
  width: 32px;
  left: 50%;
  margin-left: -16px;
  top: 50%;
  margin-top: -16px;
}

/* --- --- --- */

.step-1 { --delay: 2s } 
.step-2 { --delay: 3s }
.step-3 { --delay: 4s }

/* --- --- --- */

.loading-border {
  animation: 
    changeBorder 
    var(--timing) 
    var(--delay) 
    var(--repetition) 
    forwards;
}

@keyframes changeBorder {
  0% { stroke: var(--loading-border) }
  99% { stroke: var(--loading-border) }
  100% { stroke: var(--done-border) }
}

/* --- --- --- */

.loading-bg {
  animation: 
    changeBg 
    var(--timing) 
    var(--delay) 
    var(--repetition) 
    forwards;
}

@keyframes changeBg {
  0% { fill: var(--loading-bg) }
  99% { fill: var(--loading-bg) }
  100% { fill: var(--done-bg) }
}

/* --- --- --- */

.loading-icon {
  animation: 
    rotateIcon 
    var(--timing) 
    var(--delay) 
    var(--repetition) 
    forwards, 
    hideIcon 
    var(--timing) 
    var(--delay) 
    var(--repetition) 
    forwards; 
}

.done-icon {
 animation: 
   showIcon
   var(--timing) 
   var(--delay) 
   var(--repetition) 
   forwards
}

@keyframes rotateIcon {
  from { transform: rotateZ(0) }
  to { transform: rotateZ(360deg) }
}

@keyframes hideIcon { 
  0% { opacity: 1 }
  99% { opacity: 1 }
  100% { opacity: 0 }
}

@keyframes showIcon { 
  0% { opacity: 0 }
  99% { opacity: 0 }
  100% { opacity: 1 }
}

/* --- --- --- */
              
            
!

JS

              
                
              
            
!
999px

Console