Css code loading page

Hello world,I want to add this code to my bubble page during loading. (image 3) https://codepen.io/codingstella/pen/MWXZezB

I try with HTML and it outputs something in black that doesn’t move like a simple picture (image 1).
If I put it in CSS between the bounds it’s a blue background (image 2).

Also if you have an idea for it to be only the time of page load.

Many thanks for your help. :slightly_smiling_face:



It works just fine.

You need to create a single HTML element. From Codepen, copy the HTML section into the top of the element without tags.

then create some style tags below, and put the CSS section into them. Then you will need to adjust the below tags to make it the size you need.

svg {
  width: 30vmin;

  height: 30vmin;

  overflow: visible;
}

Here is the full code for the element.

<svg viewBox="0 0 100 100">

  <g class="shadow">

    <ellipse cx="50" cy="100" rx="50" ry="5" />

  </g>

  <g class="core">

    <circle cx="50" cy="50" r="10" />

    <circle cx="50" cy="50" r="10" />

  </g>

  <g>

    <g class="ring" transform="rotate(-30, 50, 50)">

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

    </g>

    <g class="ring" transform="rotate(30, 50, 50)">

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

    </g>

    <g class="ring" transform="rotate(90, 50, 50)">

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

      <ellipse cx="50" cy="50" rx="20" ry="50" />

    </g>

  </g>

  <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">

    <feGaussianBlur stdDeviation="2" />

  </filter>

  <defs>

    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">

      <stop offset="0%" style="stop-color:#00ddfd;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#2d6a82;stop-opacity:1" />

    </linearGradient>

  </defs>

</svg>


<style>
html,
body {
  width: 100%;

  height: 100%;

  background-image: linear-gradient(#2a3e4d, #255c72);

  display: flex;

  align-items: center;

  justify-content: center;
}

svg {
  width: 30vmin;

  height: 30vmin;

  overflow: visible;
}

svg .shadow {
  filter: url(#blur);

  fill: #2a3e4d;

  opacity: 0.4;
}

svg .core circle {
  fill: url(#gradient);
}

svg .core circle:first-child {
  filter: url(#blur);

  opacity: 0.5;
}

svg .ring ellipse {
  stroke: #00ddfd;

  stroke-width: 2px;

  fill: none;

  transform-origin: center;

  stroke-dasharray: 109 6;

  stroke-dashoffset: 26;
}

svg .ring ellipse:nth-child(1) {
  filter: url(#blur);

  opacity: 0.5;
}

svg .ring ellipse:nth-child(3) {
  stroke-dasharray: 0 230;

  animation-name: orbit;

  animation-duration: 3s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  stroke-width: 7px;

  stroke-linecap: round;
}

svg .ring ellipse:nth-child(4) {
  stroke-dasharray: 0 230;

  animation-name: orbit;

  animation-duration: 3s;

  animation-delay: -1.5s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  stroke-width: 7px;

  stroke-linecap: round;
}

svg .ring:nth-child(2) ellipse {
  animation-duration: 6s;

  animation-direction: reverse;
}

svg .ring:nth-child(3) ellipse:nth-child(3) {
  animation-delay: -1s;
}

@keyframes orbit {
  0% {
    stroke-dashoffset: 0;
  }

  50% {
    stroke-width: 4px;
  }

  100% {
    stroke-dashoffset: 230;
  }
}





</style>

Thank you very much for your help.

it works very well, thanks again.

Small question if you can help me, how to make it visible only when the page is loading? :slightly_smiling_face:

Use standard visibility conditions I would think.

Thanks you so much.

This topic was automatically closed after 70 days. New replies are no longer allowed.