Skip to content

Instantly share code, notes, and snippets.

@nickbutcher
Last active September 21, 2020 00:38
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save nickbutcher/1e6c2309ee075ac62d2f8a6c285f0ce8 to your computer and use it in GitHub Desktop.
Save nickbutcher/1e6c2309ee075ac62d2f8a6c285f0ce8 to your computer and use it in GitHub Desktop.
A prototype of a loading indicator utilizing repeated gradients. See https://twitter.com/crafty/status/914830571196571648
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
-->
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/loading_bar">
<target android:name="loading_bar">
<aapt:attr name="android:animation">
<!-- translate left by 2 stripes -->
<objectAnimator
android:propertyName="translateX"
android:duration="700"
android:interpolator="@android:interpolator/linear"
android:valueFrom="0"
android:valueTo="-64"
android:repeatCount="-1" />
</aapt:attr>
</target>
</animated-vector>
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
or implied. See the License for the specific language governing permissions and limitations under
the License.
-->
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="360dp"
android:height="32dp"
android:viewportWidth="360"
android:viewportHeight="32">
<clip-path android:pathData="M8,0L352,0A8,8 0,0 1,360 8L360,24A8,8 0,0 1,352 32L8,32A8,8 0,0 1,0 24L0,8A8,8 0,0 1,8 0z" />
<group android:name="loading_bar">
<!-- note: this shape draws beyond the right edge of the viewport as it will be animated leftward -->
<path android:pathData="M0,0 L424,0 L424,32 L0,32 Z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="32"
android:endY="32"
android:startX="0"
android:startY="0"
android:tileMode="repeat"
android:type="linear">
<item
android:color="#c12124"
android:offset="0.0" />
<item
android:color="#c12124"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
</group>
<!-- sheen -->
<path
android:fillAlpha=".2"
android:fillColor="#FFF"
android:pathData="M8,2L352,2A6,6 0,0 1,358 8L358,8A6,6 0,0 1,352 14L8,14A6,6 0,0 1,2 8L2,8A6,6 0,0 1,8 2z" />
</vector>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment