File

src/app/shared/ui/loader/loader.component.ts

Metadata

selector	`bgui-loader`
standalone	`true`
imports	`CommonModule`
styleUrls	`./loader.component.scss`
templateUrl	`./loader.component.html`

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'bgui-loader',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss']
})
export class LoaderComponent {

}

<svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-16">
  <circle
    color="primary"
    cx="32"
    cy="32"
    r="32"
    class="sc-ksdxgE zqvWX"></circle>
  <circle
    color="primary"
    cx="32"
    cy="32"
    r="32"
    stroke-linecap="round"
    class="sc-hBUSln cmLpsk"></circle>
</svg>

<!--

<div class="">
  <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-16">
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      class="sc-ksdxgE zqvWX"></circle>
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      stroke-linecap="round"
      class="sc-hBUSln cmLpsk"></circle>
  </svg>
</div>

<div class="">
  <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn">
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      class="sc-ksdxgE zqvWX"></circle>
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      stroke-linecap="round"
      class="sc-hBUSln cmLpsk"></circle>
  </svg>
</div>

<div class="">
  <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-32">
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      class="sc-ksdxgE zqvWX"></circle>
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      stroke-linecap="round"
      class="sc-hBUSln cmLpsk"></circle>
  </svg>
</div>

<div class="">
  <svg aria-label="Loading" viewBox="0 0 64 64" class="sc-bqiRlB fJNpxn-36">
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      class="sc-ksdxgE zqvWX"></circle>
    <circle
      color="primary"
      cx="32"
      cy="32"
      r="32"
      stroke-linecap="round"
      class="sc-hBUSln cmLpsk"></circle>
  </svg>
</div>

-->

./loader.component.scss



.fJNpxn {
  overflow: visible;
}

.fJNpxn-16 {
  overflow: visible;
}

.fJNpxn-32 {
  overflow: visible;
}

.fJNpxn-36 {
  overflow: visible;
}

.fJNpxn {
  margin-left: auto;
  margin-right: auto;
  animation: 1.116s linear 0s infinite normal none running cJiLXh;
  padding: 1.5px;
  height: 24px;
  width: 24px;
  box-sizing: content-box!important;
}


.fJNpxn-16 {
  margin-left: auto;
  margin-right: auto;
  animation: 1.116s linear 0s infinite normal none running cJiLXh;
  height: 16px;
  width: 16px;
  box-sizing: content-box!important;
}

.fJNpxn-32 {
  margin-left: auto;
  margin-right: auto;
  animation: 1.116s linear 0s infinite normal none running cJiLXh;
  padding: 1.5px;
  height: 32px;
  width: 32px;
  box-sizing: content-box!important;
}
.fJNpxn-36 {
  margin-left: auto;
  margin-right: auto;
  animation: 1.116s linear 0s infinite normal none running cJiLXh;
  padding: 1.5px;
  height: 38px;
  width: 38px;
  box-sizing: content-box!important;
}

.zqvWX {
  fill: none;
  stroke: rgba(255,255,255,0.5) ;
  stroke-width: 8;
}



.cmLpsk {
  animation: 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite normal none running fnezX;
  fill: none;
  stroke: #ffffff;
  stroke-dasharray: 180;
  transform-origin: center center;
  stroke-width: 8;
}



@keyframes cJiLXh {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


@keyframes fnezX{
  0% {
    stroke-dashoffset: 162;
    transform: rotate(0deg);
  }
  50% {
    stroke-dashoffset: 90;
  }
  100% {
    stroke-dashoffset: 162;
    transform: rotate(360deg);
  }
}

Legend

Html element

Component

Html element with directive

File

Metadata

results matching ""

No results matching ""