diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
index 7c5516430c..55ae909c89 100644
--- a/src/bundle/Resources/public/scss/_mixins.scss
+++ b/src/bundle/Resources/public/scss/_mixins.scss
@@ -11,6 +11,7 @@
 @import 'mixins/font';
 @import 'mixins/containers';
 @import 'mixins/drag-and-drop';
+@import 'mixins/spinner';
 
 @mixin datetime-field() {
     &.is-invalid {
diff --git a/src/bundle/Resources/public/scss/mixins/_spinner.scss b/src/bundle/Resources/public/scss/mixins/_spinner.scss
new file mode 100644
index 0000000000..50b5411674
--- /dev/null
+++ b/src/bundle/Resources/public/scss/mixins/_spinner.scss
@@ -0,0 +1,22 @@
+@mixin spinner($size, $line-size, $color: $ibexa-color-info) {
+    --mask: conic-gradient(#{rgba($ibexa-color-black, 0)} 10%, #{$ibexa-color-black}),
+        linear-gradient(#{$ibexa-color-black} 0 0) content-box;
+
+    width: $size;
+    height: $size;
+    padding: $line-size;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: $color;
+    -webkit-mask: var(--mask);
+    mask: var(--mask);
+    -webkit-mask-composite: source-out;
+    mask-composite: subtract;
+    animation: spinner-animation 1s infinite linear;
+}
+
+@keyframes spinner-animation {
+    to {
+        transform: rotate(1turn);
+    }
+}