Icon request: Spinnable loading icon

[generator85]

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

[jletey]

@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]

How about a circular loader?

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

[generator85]

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

[mittalyashu]

A pie chart would look something like this

[jletey]

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

[generator85]

@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]

@generator85 So something more like this?

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

[generator85]

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?

[jletey]

@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]

I guess you are right.

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

Circle 75%

What about this use-case?

[locness3]

I think all loader sizes can be useful.

[generator85]

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

[locness3]

@generator85 #171

[busti]

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]

#1199

[xd4v]

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