Results 1 to 4 of 4

Thread: Importing SVG loading spinner with CSS3 animation?

  1. #1

    Thread Starter
    New Member
    Join Date
    May 2021
    Posts
    15

    Question Importing SVG loading spinner with CSS3 animation?

    Hello,

    i have a loading spinner from a website which is animated with CSS3.
    What is the easiest way to import that spinner to a vb net project?
    Afaik i cant directly import that so i have to convert the spinner to a video or a gif?

    In CSS3 the spinner is animated with a stroke overlay in clip path and the stroke border is animated.
    https://codepen.io/pen/MWogPXK

    Or is there a possibility to let vb net do the animation?

    Thank you very much in advance!

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Posts
    12,371

    Re: Importing SVG loading spinner with CSS3 animation?

    You are able to replicate this using GDI+, though it may be a bit extensive but since it looks like you're drawing the SVG using a path then it may be worth looking into. The way to implement this would be to:
    1. Use Graphics.DrawPolygon (documentation) to draw your initial image
    2. Use a Timer to update the image
    3. During the update keep track of where your "blue" fill is
    4. Once the blue fills up the logo, keep track of where your "gray" fill is
    5. Repeat


    An alternative which may be easier, though I'm not 100% sure it can be done, is to use a WebBrowser, navigate to a blank page, then inject your custom HTML/CSS.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | HtmlLessons | CssLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    New Member
    Join Date
    May 2021
    Posts
    15

    Re: Importing SVG loading spinner with CSS3 animation?

    Thank you very much for your answer.

    The first solution seems much too extensive and complicated than necessary for a simple spinner.

    So the second one you think about a small browser frame with spinner in it when i understood correct?

  4. #4
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Posts
    12,371

    Re: Importing SVG loading spinner with CSS3 animation?

    Correct. Imagine a panel set to the dimensions of your spinner, a WebBrowser in the panel, and then after the browser navigates to the blank page, inject the HTML/CSS that you demoed in the fiddle.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | HtmlLessons | CssLessons | Code Tags | Sword of Fury - Jameram

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width