/* 基本編集禁止 ↓↓*/


.loader-area{
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    z-index: 100000;
}

.loader {
    position: fixed;    
    top: 48%;
    left: 48%;
    z-index: 100001;
}

.processing-area{
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    z-index: 100000;
}

.processing {
    position: fixed;    
    top: 48%;
    left: calc((100% - 120px) / 2);
    z-index: 100001;
}

/* 基本編集禁止 ↑↑*/


    


/* 参考URL */
/* https://css-loaders.com/colorful/ */

/* loaderデザイン↓↓ */
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #25b09b;
    --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

/* loaderデザイン↑↑ */

    
    
/* processingデザイン↓↓ */
    
    
.processing {
    width: 120px;
    height: 22px;
    border-radius: 20px;
    color: #514b82;
    border: 2px solid;
    position: relative;
}

.processing::before {
    content: "";
    position: absolute;
    margin: 2px;
    inset: 0 100% 0 0;
    border-radius: inherit;
    background: currentColor;
    animation: l6 2s infinite;
}

  @keyframes l6 {
      100% {inset:0}
  }


/* processingデザイン↑↑ */