Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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