text: import React from "react"
  import styled from "styled-components"
  import JAIcon from "../assets/icons/JAIconNarrow.png"
  import Img from "gatsby-image"
  
  const Animation = styled.div`
      .container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 250px;
        margin: -3rem 0rem 3rem 0rem;
      }
  
      .container .loader {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 150px;
        // background: url("${Komp}") no-repeat 55%/60%;
        // background: url("${JAIcon}") no-repeat 55%/60%;
      }
  
      .container .loader span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid var(--accent-color-secondary);
        pointer-events: none;
        animation: animateThreads 7s linear infinite;
      }
  
      .container .loader span:nth-child(1) {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      }
  
      .container .loader span:nth-child(2) {
        animation-direction: reverse;
        border-radius: 67% 33% 70% 30% / 75% 65% 35% 25%;
      }
  
      .container .loader span:nth-child(3) {
        animation-duration: 3s;
        border-radius: 52% 48% 70% 30% / 41% 65% 35% 59%;
      }
  
      @keyframes animateThreads {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
  
      .container .loader h2 {
        font-weight: 500;
        font-size: 8rem;
      }
    `
  
  export default function FrontAnimation() {
  
  
  
    
  
    return (
      <>
        <Animation>
                  <LoaderBackground>
            </LoaderBackground >
  
          <div className="container">
            <div className="loader">
            <LoaderBackground>
              <span></span>
              <span></span>
              <span></span>
            </LoaderBackground >
  
            </div>
          </div>
        </Animation>
      </>
    )
  }
  