From 6790ef370e94fe56a7561b5ac370a935ac175be3 Mon Sep 17 00:00:00 2001 From: Artem Kozynets Date: Sun, 14 Dec 2025 22:44:44 +0100 Subject: [PATCH 1/2] feat: replace gif loader with svg --- .../extend/main/_collapsible-blocks.less | 10 ++++++++ .../css/source/extend/pages/_dashboard.less | 2 +- .../web/css/source/_extend.less | 6 +++++ .../extend/data-grid/_data-grid-static.less | 6 +++++ web/css/source/extend/_variables.less | 1 + .../extend/components/_file-uploader.less | 4 +++ .../extend/components/_media-gallery.less | 5 ++++ .../source/extend/components/_rules-temp.less | 4 +++ web/css/source/extend/variables/_loaders.less | 25 +++++++++++++++++++ web/css/source/extend/variables/_spinner.less | 6 ++--- web/images/ajax-loader-small.svg | 6 +++++ web/images/loader-1.svg | 6 +++++ web/images/loader-2.svg | 6 +++++ web/images/process_spinner.svg | 6 +++++ web/mui/images/ajax-loader-big.svg | 6 +++++ 15 files changed, 95 insertions(+), 4 deletions(-) create mode 100644 web/css/source/extend/variables/_loaders.less create mode 100644 web/images/ajax-loader-small.svg create mode 100644 web/images/loader-1.svg create mode 100644 web/images/loader-2.svg create mode 100644 web/images/process_spinner.svg create mode 100644 web/mui/images/ajax-loader-big.svg diff --git a/Magento_Backend/web/css/source/extend/main/_collapsible-blocks.less b/Magento_Backend/web/css/source/extend/main/_collapsible-blocks.less index 1f2847e..413ee71 100644 --- a/Magento_Backend/web/css/source/extend/main/_collapsible-blocks.less +++ b/Magento_Backend/web/css/source/extend/main/_collapsible-blocks.less @@ -219,4 +219,14 @@ } } } + + // Tabs + dd { + &.open { + &:empty { + background-image: url('@{baseDir}mui/images/ajax-loader-big.svg'); + background-size: 50% 50%; + } + } + } } diff --git a/Magento_Backend/web/css/source/extend/pages/_dashboard.less b/Magento_Backend/web/css/source/extend/pages/_dashboard.less index 02307f8..27c1b73 100644 --- a/Magento_Backend/web/css/source/extend/pages/_dashboard.less +++ b/Magento_Backend/web/css/source/extend/pages/_dashboard.less @@ -104,7 +104,7 @@ .dashboard-store-stats { .dashboard-item-content { min-height: 1.8rem; - background: url(../images/ajax-loader-small.gif) no-repeat 50% 50%; + background: url('@{baseDir}images/ajax-loader-small.svg') no-repeat 50% 50%; &:has(*) { background: unset; diff --git a/Magento_MediaStorage/web/css/source/_extend.less b/Magento_MediaStorage/web/css/source/_extend.less index a4e72ec..2b6c4c3 100644 --- a/Magento_MediaStorage/web/css/source/_extend.less +++ b/Magento_MediaStorage/web/css/source/_extend.less @@ -10,3 +10,9 @@ } } } + +#sync_span { + img { + content: url('@{baseDir}images/process_spinner.svg'); + } +} diff --git a/Magento_Ui/web/css/source/extend/data-grid/_data-grid-static.less b/Magento_Ui/web/css/source/extend/data-grid/_data-grid-static.less index c42c27f..faaa60e 100644 --- a/Magento_Ui/web/css/source/extend/data-grid/_data-grid-static.less +++ b/Magento_Ui/web/css/source/extend/data-grid/_data-grid-static.less @@ -9,4 +9,10 @@ padding-right: @indent__base; } } + + .admin__data-grid-loading-mask { + .grid-loader { + background-image: url('@{baseDir}images/loader-2.svg'); + } + } } diff --git a/web/css/source/extend/_variables.less b/web/css/source/extend/_variables.less index 5ff7e8e..bf95910 100644 --- a/web/css/source/extend/_variables.less +++ b/web/css/source/extend/_variables.less @@ -13,3 +13,4 @@ @import './variables/_components.less'; @import './variables/_dropdowns.less'; @import './variables/_fields.less'; +@import 'variables/_loaders.less'; diff --git a/web/css/source/extend/components/_file-uploader.less b/web/css/source/extend/components/_file-uploader.less index 206af96..8dfe205 100644 --- a/web/css/source/extend/components/_file-uploader.less +++ b/web/css/source/extend/components/_file-uploader.less @@ -117,3 +117,7 @@ transition: @smooth__opacity; } } + +.file-uploader-spinner { + background-image: url('@{baseDir}images/loader-1.svg'); +} \ No newline at end of file diff --git a/web/css/source/extend/components/_media-gallery.less b/web/css/source/extend/components/_media-gallery.less index e3cb7b8..cf8ba67 100644 --- a/web/css/source/extend/components/_media-gallery.less +++ b/web/css/source/extend/components/_media-gallery.less @@ -59,6 +59,11 @@ border-color: @image-gallery-placeholder__hover__border-color; } } + + .file-row { + background-image: url("@{baseDir}mui/images/ajax-loader-big.svg"); + background-size: 50% 50%; + } } .image-placeholder-text { diff --git a/web/css/source/extend/components/_rules-temp.less b/web/css/source/extend/components/_rules-temp.less index 8edd1c3..c7029b8 100644 --- a/web/css/source/extend/components/_rules-temp.less +++ b/web/css/source/extend/components/_rules-temp.less @@ -278,3 +278,7 @@ } } } + +.rule-param-wait { + background-image: url('@{baseDir}images/ajax-loader-small.svg'); +} diff --git a/web/css/source/extend/variables/_loaders.less b/web/css/source/extend/variables/_loaders.less new file mode 100644 index 0000000..d49390a --- /dev/null +++ b/web/css/source/extend/variables/_loaders.less @@ -0,0 +1,25 @@ +// +// Loader variables +// _____________________________________________ + +// @loader-overlay__background-color: rgba(255, 255, 255, .5); +// @loader-overlay__z-index: 9999; + +// @loader-icon__width: 160px; +// @loader-icon__height: 160px; +// @loader-icon__background-color: transparent; +@loader-icon__background-image: url('@{baseDir}images/loader-2.svg'); +// @loader-icon__background-position: 50% 50%; +// @loader-icon__border-radius: 5px; +// @loader-icon__padding: ''; + +// @loader-text: false; +// @loader-text__color: @primary__color; +// @loader-text__font-size: @font-size__base; +// @loader-text__font-family: @font-family__base; +// @loader-text__font-weight: @font-weight__regular; +// @loader-text__font-style: @font-style__base; +// @loader-text__padding: 130px 0 0; + +// @loading__background-color: @loader-overlay__background-color; +// @loading__background-image: @loader-icon__background-image; diff --git a/web/css/source/extend/variables/_spinner.less b/web/css/source/extend/variables/_spinner.less index 053e3e1..ea14171 100644 --- a/web/css/source/extend/variables/_spinner.less +++ b/web/css/source/extend/variables/_spinner.less @@ -6,7 +6,7 @@ @spinner__height: 4.8rem; @spinner__background-color: transparent; -@spinner__background-image: url('@{baseDir}images/loader-1.gif'); +@spinner__background-image: url('@{baseDir}images/loader-1.svg'); @spinner__background-position: 50% 50%; @spinner__background-repeat: no-repeat; @spinner__background-size: contain; @@ -43,7 +43,7 @@ @loader__height: 4.8rem; @loader__background-color: fade(@color-white, 50%); -@loader__background-image: url('@{baseDir}images/loader-1.gif'); +@loader__background-image: url('@{baseDir}images/loader-1.svg'); @loader__background-position: 50% 50%; @loader__background-repeat: no-repeat; @loader__background-size: contain; @@ -58,7 +58,7 @@ @loader-mask__height: 7.8rem; @loader-mask__background-color: fade(@color-white, 50%); -@loader-mask__background-image: url('@{baseDir}images/loader-1.gif'); +@loader-mask__background-image: url('@{baseDir}images/loader-1.svg'); @loader-mask__background-position: 50% 50%; @loader-mask__background-repeat: no-repeat; @loader-mask__background-size: 4.8rem; diff --git a/web/images/ajax-loader-small.svg b/web/images/ajax-loader-small.svg new file mode 100644 index 0000000..3a0492a --- /dev/null +++ b/web/images/ajax-loader-small.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/images/loader-1.svg b/web/images/loader-1.svg new file mode 100644 index 0000000..d85f9e3 --- /dev/null +++ b/web/images/loader-1.svg @@ -0,0 +1,6 @@ + diff --git a/web/images/loader-2.svg b/web/images/loader-2.svg new file mode 100644 index 0000000..d85f9e3 --- /dev/null +++ b/web/images/loader-2.svg @@ -0,0 +1,6 @@ + diff --git a/web/images/process_spinner.svg b/web/images/process_spinner.svg new file mode 100644 index 0000000..3a0492a --- /dev/null +++ b/web/images/process_spinner.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/mui/images/ajax-loader-big.svg b/web/mui/images/ajax-loader-big.svg new file mode 100644 index 0000000..327bb7d --- /dev/null +++ b/web/mui/images/ajax-loader-big.svg @@ -0,0 +1,6 @@ + + + + + + From 02fb58b6f57901b62a178ed7ddad0a43f2d94e93 Mon Sep 17 00:00:00 2001 From: Artem Kozynets Date: Tue, 13 Jan 2026 15:31:23 +0100 Subject: [PATCH 2/2] chore: url format reference --- web/css/source/extend/components/_media-gallery.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/css/source/extend/components/_media-gallery.less b/web/css/source/extend/components/_media-gallery.less index cf8ba67..5d42bfd 100644 --- a/web/css/source/extend/components/_media-gallery.less +++ b/web/css/source/extend/components/_media-gallery.less @@ -61,7 +61,7 @@ } .file-row { - background-image: url("@{baseDir}mui/images/ajax-loader-big.svg"); + background-image: url('@{baseDir}mui/images/ajax-loader-big.svg'); background-size: 50% 50%; } }