diff --git a/apps/pink/src/pages/components/inline-loader.mdx b/apps/pink/src/pages/components/inline-loader.mdx
index d45b6542d7..eb607c4681 100644
--- a/apps/pink/src/pages/components/inline-loader.mdx
+++ b/apps/pink/src/pages/components/inline-loader.mdx
@@ -30,7 +30,7 @@ title: Inline loader
 <Preview center>
     <only-preview>
         <div class="box u-flex u-cross-center u-gap-16" style="--box-border-radius:var(--border-radius-xsmall); --p-box-padding:1rem 1.5rem;">
-            <div class="loader is-small"></div>
+            <div class="loader is-small is-transparent"></div>
             <span class="u-trim u-stretch">Provide contextual message</span>
             <button class="button is-secondary">
                 <span class="text">Button</span>
diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
index 324c4d7c27..dcc62baa92 100644
--- a/apps/pink/src/pages/elements/loader.mdx
+++ b/apps/pink/src/pages/elements/loader.mdx
@@ -17,12 +17,21 @@ description: Use loaders to indicate to users that something is in progress and
     <div class="loader is-small"></div>
 </Preview>
 
+## Remove base border color
+
+| State Class          | Type                |                                                 |
+| -------------------- | ------------------- | ----------------------------------------------- |
+| `is-transparent`     | Remove Circle color | Base color of loading change to transparent     |
+
+<Preview center>
+    <div class="loader is-transparent"></div>
+</Preview>
 
 ## Loading precent state
 Work different from the other rotate loaders.
-| State Class          | Type     |                                                 |
-| -------------------- | -------- | ----------------------------------------------- |
-| `is-loading`         | Loading  | Change behaving from rotating to loading        |
+| State Class          | Type                |                                                 |
+| -------------------- | ------------------- | ----------------------------------------------- |
+| `is-loading`         | Loading             | Change behaving from rotating to loading        |
 
 | param                         | represents                                                                       | Example:                                           |
 | ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
@@ -32,4 +41,5 @@ Work different from the other rotate loaders.
 
 <Preview center>
     <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-100);"></div>
-</Preview>
\ No newline at end of file
+</Preview>
+
diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss
index 4764d11e21..db9e2f01c8 100644
--- a/packages/ui/src/6-elements/_loader.scss
+++ b/packages/ui/src/6-elements/_loader.scss
@@ -42,6 +42,7 @@
       background: hsl(var(--p-loader-bg-color));
     }
   }
+  &.is-transparent { --p-loader-base-full-color:var(--transparent)!important; }
 
   &.is-small {
     --p-loader-size:        var(--loader-size, #{pxToRem(16)});