Сделать загрузку заполнителя отзывчивой - PullRequest
Новая
       26

Сделать загрузку заполнителя отзывчивой

0 голосов
/ 27 марта 2020

Я использую create-content-loader пакет для создания загрузки заполнителя, но не могу сделать его отзывчивым. Как заставить svg заполнять родительский контент. Я не хочу устанавливать ширину в 1060 пикселей. Я тоже пытался со свойством viewbox. 

   <ContentLoader
      height={40}
      width={1060}
      speed={2}
      primaryColor="#d9d9d9"
      secondaryColor="#ecebeb"
    >
      <rect x="10" y="40" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="60" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="100" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="80" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="120" rx="0" ry="0" width="75" height="10" />
      <rect x="110" y="40" rx="0" ry="0" width="370" height="125" />
      <rect x="275" y="63" rx="0" ry="0" width="72" height="4" />
      <rect x="430" y="5" rx="5" ry="5" width="75" height="20" />
      <rect x="110" y="10" rx="0" ry="0" width="200" height="15" />
      <rect x="10" y="5" rx="4" ry="4" width="75" height="20" />
      <circle cx="493" cy="54" r="2" />
      <circle cx="497" cy="47" r="7" />
      <circle cx="497" cy="77" r="7" />
      <circle cx="497" cy="107" r="7" />
    </ContentLoader>```

1 Ответ

0 голосов
/ 27 марта 2020

ContentLoader использует html5 canvas для рендеринга, поэтому viewbox не будет работать. Я хотел бы сделать следующее:

  1. добавить ref к элементу контейнера (который содержит ContentLoader).
  2. получить ширину этого элемента, используя ref
  3. pass это значение для ширины ContentLoader.

Имейте в виду, что при первом рендере ref.current будет null или undefined

Обновление:

Также вы можете попробовать извлечь svg из create-content-loader, пример и превратить его в ваш компонент. Просто измените атрибуты svg, чтобы они соответствовали прямоугольным реквизитам svg. Чем установить css class в svg, чтобы иметь эти свойства: 

.responsive-svg {
  width: 100%;
  height: auto;
}

Svg (до того, как вы превратите его в реагирующий компонент), может выглядеть примерно так: 

<svg
  role="img"
  width="400"
  height="160"
  aria-labelledby="loading-aria"
  viewBox="0 0 400 160"
  preserveAspectRatio="none"
>
  <title id="loading-aria">Loading...</title>
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    clip-path="url(#clip-path)"
    style='fill: url("#fill");'
  ></rect>
  <defs>
    <clipPath id="clip-path">
        <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
        <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
        <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
        <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
        <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
        <circle cx="20" cy="20" r="20" />
    </clipPath>
    <linearGradient id="fill">
      <stop
        offset="0.599964"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-2; -2; 1"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="1.59996"
        stop-color="#ecebeb"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-1; -1; 2"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="2.59996"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="0; 0; 3"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
    </linearGradient>
  </defs>
</svg>
...