Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon request: Spinnable loading icon #695

Open
generator85 opened this issue Jul 23, 2019 · 16 comments
Open

Icon request: Spinnable loading icon #695

generator85 opened this issue Jul 23, 2019 · 16 comments

Comments

@generator85
Copy link

Icon Request

  • Icon name: loader-2
  • Use case: spinnable loading icon (current loading icon doesn't look great when rotating)
  • Screenshots of similar icons:

loading.svg.zip
2019-07-23 11 37 00 am

@jletey
Copy link

jletey commented Jul 23, 2019

@generator85 LGTM! I've gone ahead and formatted the icon for you:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10" />
</svg>

What do you think @locness3?

@mittalyashu
Copy link
Contributor

How about a circular loader?

Circle 25% Circle 50% Circle 75% Circle 100%
image image image image

@generator85
Copy link
Author

@mittalyashu I think your version is more of a pie chart icon and should belong in seperate thread.

@mittalyashu
Copy link
Contributor

A pie chart would look something like this

image

@jletey
Copy link

jletey commented Jul 23, 2019

@generator85 This is what I interpreted from @mittalyashu comment:

Shot 2019-07-23 at 12 34 55

@generator85
Copy link
Author

@johnletey Thx! On second thought maybe it would be better if the gap was in the top right. Since when rotating the icon the starting point of the line should be at 0°:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
	<path  d="M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2"/>
</svg>

@jletey
Copy link

jletey commented Jul 23, 2019

@generator85 So something more like this?

Shot 2019-07-23 at 12 37 17

Although, loading-100 is just a circle and won't look like anything when spinning ... so it's not needed

@generator85
Copy link
Author

generator85 commented Jul 23, 2019

Yes that could definitely work, though when spinning with (for example) a css animation you would only need loading-75. So would there be any use for including the others?

loader-2

@jletey
Copy link

jletey commented Jul 23, 2019

@generator85 Good point, and I don't think that there is a use case for the others

What do you think @locness3 @mittalyashu @ahtohbi4?

@mittalyashu
Copy link
Contributor

mittalyashu commented Jul 23, 2019

I guess you are right.

But if other circles are not usable, I think circle 75% can be usable at least.

Circle 75%
circle 75%

What about this use-case?

image

@moeenio
Copy link

moeenio commented Jul 24, 2019

I think all loader sizes can be useful.

@generator85
Copy link
Author

So what steps should be taken to have this icon included?

@moeenio
Copy link

moeenio commented Aug 29, 2019

@generator85 #171

@busti
Copy link

busti commented Apr 11, 2023

Here is a generic spinner I threw together as a quick fix if anyone is interested.
It is based on the circle icon.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle">
    <circle cx="12" cy="12" r="10" stroke-dasharray="63" stroke-dashoffset="21">
        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="2s"
                          repeatCount="indefinite"/>
        <animate attributeName="stroke-dashoffset" dur="8s" repeatCount="indefinite" keyTimes="0; 0.5; 1"
                 values="-16; -47; -16" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"/>
    </circle>
</svg>

@j-jalving
Copy link

#1199

@xd4v
Copy link

xd4v commented Jan 27, 2024

Thanks @busti!

The svg wasn't compatible with react-native-svg, unfortunately. I updated it to make it work with React Native, if that helps anyone.

import * as React from 'react'
import { useState, useEffect } from 'react'
import { Animated, Easing } from 'react-native'
import Svg, { Circle } from 'react-native-svg'


const Spinner = () => {
    const [spinAnim, setSpinAnim] = useState(new Animated.Value(0))

    const interpolateRotation = spinAnim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    })

    const animatedStyle = {
        transform: [{ rotate: interpolateRotation }],
    }

    useEffect(() => {
        Animated.loop(
            Animated.timing(spinAnim, {
                toValue: 1,
                duration: 600,
                easing: Easing.linear,
                useNativeDriver: true,
            })
        ).start()
    })

    return (
        <Animated.View style={animatedStyle}>
            <Svg
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                className="feather feather-circle"
            >
                <Circle
                    cx={12}
                    cy={12}
                    r={10}
                    strokeDasharray={63}
                    strokeDashoffset={21}
                ></Circle>
            </Svg>
        </Animated.View>
    )
}

export default Spinner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants