Verified Commit 14669ce1 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #2575253 by jwilson3, Gauravvvv, rachanakamlesh, Balu Ertl,... 

Issue #2575253 by jwilson3, Gauravvvv, rachanakamlesh, Balu Ertl, Jmdrawneek@googlemail.com, snehi, cleverington, BalajiDS, xaiwant, smustgrave, mgifford, emma.maria, dillix, andypost, Bojhan, mohit1604: Update loading icon and use SVG
parent 717b02a8

core/misc/components/ajax-progress.module.css

+1 −1
Original line number Diff line number Diff line
@@ -39,7 +39,7 @@ tr .ajax-progress-throbber .throbber { 
  opacity: 0.9;

  border-radius: 7px;

  background-color: #232323;

  background-image: url(../loading-small.gif);

  background-image: url(../loading-small.svg);

  background-repeat: no-repeat;

  background-position: center center;

}

core/misc/loading-small.svg

0 → 100644
+28 −0
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" width="24" height="24" style="shape-rendering: auto; display: block; background:#212121;" viewBox="0 0 100 100">

  <g fill="#e8e8e8">

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.7s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(45 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.6s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(90 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.5s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(135 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.4s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(180 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.3s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(225 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.2s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(270 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.1s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(315 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="0s"/>

    </rect>

  </g>

</svg>

core/misc/loading.svg

0 → 100644
+28 −0
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" display="block" preserveAspectRatio="xMidYMid" width="48" height="48" style="shape-rendering: auto; display: block; background:#212121;" viewBox="0 0 100 100">

  <g fill="#e8e8e8">

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.7s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(45 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.6s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(90 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.5s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(135 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.4s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(180 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.3s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(225 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.2s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(270 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="-0.1s"/>

    </rect>

    <rect width="16" height="16" x="42" y="9" rx="8" ry="8" transform="rotate(315 50 50)">

      <animate attributeName="opacity" dur="0.8s" keyTimes="0;1" repeatCount="indefinite" values="1;0" begin="0s"/>

    </rect>

  </g>

</svg>

core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css

+1 −1
Original line number Diff line number Diff line
@@ -63,7 +63,7 @@ 
  opacity: 0.9;

  border-radius: 7px;

  background-color: #232323;

  background-image: url(../../../../../../../misc/loading-small.gif);

  background-image: url(../../../../../../../misc/loading-small.svg);

  background-repeat: no-repeat;

  background-position: center center;

}

core/tests/Drupal/KernelTests/Core/Theme/ImageTest.php

+1 −1
Original line number Diff line number Diff line
@@ -55,7 +55,7 @@ protected function setUp(): void { 


    $this->testImages = [

      'core/misc/druplicon.png',

      'core/misc/loading.gif',

      'core/misc/loading.svg',

    ];

  }