Circle Loading Animation In Unity3D

This short guide will show you how to make the circle animation below. It’s actually quite simple.

alt text

First you will need to create an image to use for your animation. If you’re to lazy you can just use the one I made. Download Image. Save it into the Assets folder of your Unity project.

We are going to make the background image first. Create a new UI Image object (Gameobject > UI > Image) call it “Loading Circle”. On the Image Component set the Source Image the one you created or downloaded and give it a colour you fancy.

Once you have done that you will need to duplicate it (Right Click > Duplicate). Rename the duplicated gameobject to “Progress”, make it a child of the “Loading Circle” gameobject and change its anchor points to stretch on both the X & Y axis. Again change it’s colour to something you want.

On the “Progress” gameobject change the Image Type on the Image Component to “Filled”, set the Fill Amount as 0.1, and ensure Fill Method is “Radial 360”.

All you need to do now is assign the script below to the “Progress” gameobject and you should have a working animation.

The Code

using UnityEngine;

public class LoadingCircle : MonoBehaviour
    private RectTransform rectComponent;
    private float rotateSpeed = 200f;

    private void Start()
        rectComponent = GetComponent<RectTransform>();

    private void Update()
        rectComponent.Rotate(0f, 0f, rotateSpeed * Time.deltaTime);

Microsoft Visual Studio in Linux with Unity3D

Guide on how to get Microsoft Visual Studio in Linux using Virtual Box Continue reading

System Subversion Introduction

Published on January 04, 2017

Smooth 2D Camera Follow In Unity3D

Published on December 28, 2016